Aurelia 가져 오기 클라이언트를 사용하여 CORS 오류가 발생했습니다.

Question

저는 Aurelia Fetch Client를 사용하여 자체 슬림 프레임 워크 RESTful API를 쿼리하고 있습니다. 나는 자바 스크립트 콘솔에서 다음과 같은 오류를 받고 있어요, 그러나

Access-Control-Allow-Headers →X-Requested-With, Content-Type, Accept, Origin, Authorization 
Access-Control-Allow-Methods →GET, POST, PUT, DELETE, OPTIONS 
Access-Control-Allow-Origin →* 
Cache-Control →no-store, no-cache, must-revalidate, post-check=0, pre- check=0 
Connection →close 
Content-Type →application/json;charset=utf-8 
Expires →Thu, 19 Nov 1981 08:52:00 GMT 
Host →localhost:8080 
Pragma →no-cache 
X-Powered-By →PHP/5.6.19 

: API는 (우편 배달부에 의해 확인으로) 올바른 헤더를 포함

Fetch API cannot load http://localhost:8080/api/v1/calendar/2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

나는에 대한 CORS 확장자를 사용하는 경우 Google 크롬, 성공적으로 연결할 수 있습니다.

saveCalendar() { 
    this.httpClient.fetch('http://localhost:8080/api/v1/calendar/2', { 
     method: 'post', 
     body: json(data) 
    }).then(response => { 
      window.alert("Got a response: " + response.status); 
      if (response.status == 200) { // OK 
       window.alert("Calendar saved!"); 
      } else { // Error 
       window.alert("Error"); 
      } 
     }); 
    this.getCalendars(); 
} 

:

이

내 아우렐 리아 코드가 (단, 두 번째 문제는 CORS 확장 내 API 403 또는 500를 반환하는 경우에도 200에 모든 것을 변화, 응답 상태 코드를 죽이는 것으로 보인다이다) Access-Control-Allow-Origin: *가 어디에서나 액세스 할 수있는 이유는 무엇입니까?

=== 편집 :는

더 조심 관찰 후, 나는 아우렐 리아와 2 개 요청을하는 가져 오기 것을 알 수있다. 프리 플라이트 요청 OPTIONS는 정상적으로 처리 된 것으로 보이고 응답에 CORS Access-Control-Allow-Origin: * 헤더를 수신합니다. 그러나 실제 POST 요청에서 API는 아무 것도 반환하지 않습니다. 다음과 같이 POST 요청 헤더은 다음과 같습니다

Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:en-US,en;q=0.8,es-419;q=0.6,es;q=0.4,gl;q=0.2 Cache-Control:no-cache Connection:keep-alive Content-Length:142 content-type:application/json Host:localhost:8080 Origin:http://localhost:9000 Pragma:no-cache Referer:http://localhost:9000/ User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36

내가 같은 요청을하는 우체부에이 헤더를 복사 할 때, 그것은 또한 같은 방법으로 실패합니다. 그러나 헤더 (content-type:application/json) 중 하나를 제거하면 작동합니다.

내 아우렐 리아 코드의 실제 요청은 다음과 같습니다

// src/common/api.js 
import { inject } from 'aurelia-dependency-injection'; 
import 'fetch'; 
import { HttpClient, json } from 'aurelia-fetch-client'; 

@inject(HttpClient) 
export class API { 
    constructor(httpClient) { 
    httpClient.configure(config => { 
     config 
     .withBaseUrl('http://localhost:8080/api/v1'); 
     .withDefaults({ 
      mode: 'cors', 
      headers: { 
      'Accept': 'application/json' 
      'Content-type' : 'application/json' 
      } 
     }); 
    }); 
    this.httpClient = httpClient; 
    } 

    getData(url) { 
    return this.httpClient.fetch(url) 
     .then(response => response.json()); 
    } 

    postData(url, data) { 
    return this.httpClient.fetch(url, { 
     method: 'post', 
     body: json(data) 
    }); 
    } 
} 

설정 페치 아우렐 리아 API 클라이언트에서 'Content-type' : 'application/json'을 제거하는 분명한 것 같다,하지만 내가 할 경우에도, 여전히 헤더를 보냅니다.

내 새로운 질문 : 1. Aurelia가이 헤더를 보내지 못하게하려면 어떻게해야합니까? 2. 또는 ...이 헤더를받을 때 슬림이 죽어 버리는 이유는 무엇입니까? 3. 내 코드에 다른 문제가 있습니까? 상기 서버가 해당 서버를 실행중인 제품에 따라 달라

Answer 1

는 대부분의 경우, 8080에서 실행중인 서버가

... CORS가 headerd 달리 말할 것 같다 여부를 요청 허용하도록 구성하는 구성이 필요합니다. 이 점을 명확히하면 그 대답을 업데이트 할 것입니다.

당신이 말한 확장 기능에 대해서는 잘 모르겠지만, 결국에는 더 많은 문제를 일으킬 수있는 이상한 일을해야합니다. 그러나 그것은 제 의견입니다. Aurelia Post with http-fetch-client producing an options request이