Question

我正在使用Aurelia Fetch Client来查询我自己的Slim Framework RESTful API。 API包含正确的标题（由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返回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: *标头。但是，在实际的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

当我将这些标题复制到Postman中以发出相同的请求时，它也会以同样的方式失败。但是，如果我删除其中一个标题（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'似乎很明显，但即使我这样做，它仍会发送标题。

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

Answer 1

Most likely, your server running on 8080 need to be configured to accept CORS request whether the headerd seems to say otherwise...

The configuration for the said server depends on what you're running that server. I'll update that answer once you clarify this point.

I don't know about the extension you mention, that must do some weird stuff which could end you having more trouble at the end, but that's only my opinion.

You might also want to have a look here : Aurelia Post with http-fetch-client producing an options request

使用Aurelia Fetch客户端的CORS错误

1 个答案: