2017-02-02 3 views
0

내 앱에는 webService에 대한 목록이 있으며 Angular2와 함께 http을 가져오고 싶습니다. 그에 대한 서비스를 만들고 여기에 내가 코드가 그것을 썼습니다 :angular2에 http 헤더를 설정하십시오.

내 HTTP 서비스 :

import { Injectable, Inject } from '@angular/core'; 
import { RequestOptionsArgs, Http, Response, RequestOptions, Request, RequestMethod, Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { StaticValuesService } from './static-values.service'; 
import { Building } from '../model/building'; 

@Injectable() 
export class BuildingService { 

    constructor(private _http: Http, private _values: StaticValuesService) {} 

    getAllBuildings() { 

    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this._http.get(this._values.MainApi + 'api/getbuildings/', options) 
     .map((response: Response) => response.json()); 

    } 

} 

그리고이 코드와 구성 요소에 가입 :

constructor(private _buildingServices: BuildingService) { } 

    ngOnInit() { 
    this._buildingServices.getAllBuildings().subscribe(res => { 
     console.log(res); 
    }, error => { 
     console.log(error); 
    }); 
    } 

요청 헤더에 contnet-type이 설정되지 않은 것처럼 각형 서버 모양을 실행 한 후! 그 결과 콘솔에 404 오류가 발생했습니다! 네트워크 크롬에서

enter image description here

요청 내용 :

OPTIONS /api/getbuildings/ HTTP/1.1 
Host: nommix-api.azurewebsites.net 
Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: http://localhost:4200 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36 
Access-Control-Request-Headers: authorization, content-type 
Accept: */* 
Referer: http://localhost:4200/dashboard/master 
Accept-Encoding: gzip, deflate, sdch, br 
Accept-Language: en,en-US;q=0.8,fa;q=0.6 
AlexaToolbar-ALX_NS_PH: AlexaToolbar/alx-4.0 

응답 헤더 : 내가 우체부와 API를 시험 할 때

HTTP/1.1 404 Not Found 
Cache-Control: no-cache 
Pragma: no-cache 
Content-Length: 134 
Content-Type: application/json; charset=utf-8 
Expires: -1 
Server: Microsoft-IIS/8.0 
X-AspNet-Version: 4.0.30319 
X-Powered-By: ASP.NET 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Headers: Content-Type 
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS 
Set-Cookie: ARRAffinity=12a1bb0d03776b567fa3d04e126a9fa5ad153cba2c87fbc48fc25d775bebd44a;Path=/;Domain=nommix-api.azurewebsites.net 
Date: Thu, 02 Feb 2017 11:51:25 GMT 

가 올바르게 작동합니다.

왜 작동하지 않습니까? 어떻게 해결할 수 있습니까?

감사합니다.

답변

1

이 튜토리얼에 의해 당신이 설정 프록시 https://github.com/angular/angular-cli#proxy-to-backend

시도가 https://stackoverflow.com/a/21458845/3676586

+0

나는 이미 설정 프록시와

Access-Control-Allow-Methods: GET, POST, OPTIONS 

백엔드 웹 서비스에 CORS를 사용 ASP.net 응용 프로그램에서 OPTIONS 방법을 사용하는 것으로 가정 'access-control'도 가능합니다. 그러나 여전히 작동하지 않습니다. 우편 배달부와 같은 도구를 사용할 때 모든 것이 제대로 작동합니다! – Sajad

+0

이 경로를 보호 했습니까? 예를 들어,이 url에 액세스하는 것과 같이, 당신의 코드'headers.append ('Authorization', 'Bearer');'토큰이 없습니다. btw, postman은 CORS에 대해 걱정하지 않으므로 get/post/options 메소드를 허용해야합니다. –

+0

테스트 목적으로 만 '인증'을 추가했습니다. 내 마지막 지점 (api/getbuildings /)에는 건물 목록이 있습니다. 바로 그 것입니다. 정식 또는 다른 어떤 것도없이. 'headers.apped ('Auth ....)'가 없어도 동일한 오류가 발생했습니다. – Sajad

관련 문제