使用 Aurelia Fetch 客户端的 CORS 错误

Question

我正在使用 Aurelia Fetch Client 查询我自己的 Slim Framework RESTful API。 API 包含正确的 header（经 Postman 验证）：

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

但是，我在 Javascript 控制台中收到以下错误：

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.

如果我使用 Google Chrome 的 CORS 扩展，我可以连接成功。（但是，第二个问题是 CORS 扩展似乎正在杀死响应状态代码，即使我的 API returns 403 或 500 也将所有内容更改为 200。）

我的 Aurelia 代码是：

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();
}

为什么 Access-Control-Allow-Origin: * 不允许我从任何地方访问？

=== 编辑：

经过仔细观察，我看到Aurelia和Fetch发出了2个请求。预检请求 OPTIONS 似乎运行良好，并在响应中收到 CORS Access-Control-Allow-Origin: * header。但是，在实际的 POST 请求中，API 没有返回任何内容。 POST请求headers如下：

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

当我将这些header复制到Postman中去发出相同的请求时，它也以同样的方式失败。但是，如果我删除其中一个 header (content-type:application/json)，它就会起作用。

我的 Aurelia 代码中的实际请求如下所示：

// 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)
    });
  }
}

从 Aurelia API 客户端 Fetch 配置中删除 'Content-type' : 'application/json' 似乎很明显，但即使我这样做，它仍然会发送 header.

所以我的新问题是： 1. 如何防止 Aurelia 发送此 header？ 2. 或者...为什么 Slim 在收到这个 header 时会死？ 3.我的代码还有什么问题吗？

Answer 1

最有可能的是，您的服务器运行在 8080 上需要配置为接受 CORS 请求，无论 headerd 是否另有说明...

所述服务器的配置取决于您运行该服务器的配置。一旦您澄清了这一点，我将更新该答案。

我不知道你提到的扩展，它一定做了一些奇怪的事情，最后可能会给你带来更多麻烦，但这只是我的意见。

您可能还想看看这里：

使用 Aurelia Fetch 客户端的 CORS 错误

CORS error using Aurelia Fetch client

fetch

cors

aurelia

aurelia-fetch-client