각도 설정 HTTP 요청 원점이 null로

잠시 동안 로컬 앵글 빌드를 HTTPS와 함께 사용하도록했습니다 (배울 수 있고 마지막으로 SSL 문제가 발생하지 않을 것임을 확신 할 수 있음). 앱). 그러나 성공하지 못한 후에는 다시 ng serve을 사용했지만 모든 AJAX 요청이 실패했습니다. Slim API를 제공하는 로컬 VM을 실행하고 CORS 설정을했습니다. 그러나, 나는 다음과 같은 오류보기 시작 : 각도 설정 HTTP 요청 원점이 null로

The 'Access-Control-Allow-Origin' header has a value 'http://gamersplane.local' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

네트워크 탭에서 전화를보고, 나는 기원 헤더가 실제로 null 인 것을보고, 내 코드를 통해보고, 나는 기원 헤더로 혼란을하지 않습니다 (당신이 할 수 있는지 확실하지 않은?). Authorization 헤더를 설정했는데 그게 전부입니까? 내 API 서비스는 다음과 같습니다.

private addToken(headers: HttpHeaders) { 
    let token = localStorage.getItem('token'); 
    if (token) { 
     headers = headers.set('Authorization', 'Bearer ' + token); 
    } 
    return headers; 
} 

private constructParams(data?: Object) { 
    // Object.keys(data).reduce((params, key) => params.set(key, data[key]), new HttpParams()); 
    let params = new HttpParams(); 
    for (let key in data) { 
     if (typeof data[key] !== 'object') { 
      params = params.set(key, data[key]); 
     } else { 
      for (let oKey in data[key]) { 
       params = params.set(key + '[' + oKey + ']', data[key][oKey]); 
      } 
     } 
    } 

    return params; 
} 


get<T = any>(path: string, data?: Object): Observable<T> { 
    let headers = new HttpHeaders(); 
    headers = this.addToken(headers); 
    return this.http 
     .get<T>(environment.apiDomain + path, { 
      headers: headers, 
      params: this.constructParams(data) 
     }); 
}

출처

2017-12-14 RhoVisions

이것은 각도와 관련이 없습니다. 서버는 예상 된 헤더로 응답해야하며, 그러면 브라우저는 요청을합니다 (그렇지 않으면 거부합니다). –

Angular 관련이 아닌 요청 원점을 null로 설정하는 방법은 무엇입니까? CORS 비행 전 응답에 의해 제어되지 않습니까? – RhoVisions

이것은 각도 문제는 아닙니다. 제 생각에는 으로 모든 출처에서 백엔드에 액세스 할 수 있도록해야합니다.. 오리진 헤더를 *으로 설정하면됩니다.

당신은 또한 당신의 전화에 프록시를 만들 수 있습니다

proxy.conf.json 설정으로 주위

{ 
    "/api": { 
    "target": "http://1.2.3.4:5/", 
    "secure": false, 
    "changeOrigin": true, 
    "logLevel": "debug" 
    } 
}

바이올린을, 그것을 알아낼 you'ff.

여러분이 봉사

, 프록시와

$ ng serve --proxy-conf ./proxy.conf.json

, 서버 (NG 봉사) 따라서 크로스 기원 제약 조건을 준수 할 필요가 없습니다, 대신 백엔드의 요청을 만들 것입니다.

지금, 당신의 서비스에 URL이

let url = 'http://1.2.3.4:5/api/'

그러나 단지

let url = '/api/'

되지 않고 프록시는 당신을 위해 이것을 처리합니다.

출처

2017-12-14 14:47:47 trichetriche

나는 프록시를 체크 아웃 할 것이다. 그러나 요청을하는 시스템 (이 경우 Angular)이 원점 값을 결정하지 않았습니까? – RhoVisions

예, 헤더 원점은 클라이언트에 의해 전송됩니다. 그러나 그것을 수용할지 여부를 결정하는 것은 서버에 달려 있습니다! 들어오는 모든 요청을 수락하면 더 이상 귀찮게하지 않아도됩니다. (분명히 로컬 테스팅을하기 위해 할 수 있습니다.) – trichetriche

모든 원점을 허용하도록 설정할 수 있지만 Angular가 원점을 null로 설정하면 dev, 그것은 자극에서 그것을하지 않을 것이라고 말하는거야? 그리고 언급했듯이, 나는 모든 기원을 허용하지 않을 것입니다. – RhoVisions

서버가 302 리디렉션으로 응답하면 분명히 Chrome에 버그가 있습니다. 새 요청을하면 Origin 헤더가 null로 설정됩니다. 제 경우 내 API가 307로 응답하므로 두 번째 리디렉션됩니다. 요청이 null로 설정되었습니다. 307 수정 된 수정 (이상한 문제 같지만 ...)

출처

2017-12-14 15:42:43 RhoVisions

각도 설정 HTTP 요청 원점이 null로

답변

관련 문제