尽管我确实从服务器获得了有效响应，但 Ajax CORS 总是失败答案

【问题标题】：Ajax CORS always fails although I do get a valid response from server尽管我确实从服务器获得了有效响应，但 Ajax CORS 总是失败
【发布时间】：2017-12-13 13:50:00
【问题描述】：

我有一个附加到 API 网关的 AWS Lambda 函数。我整天都在尝试设置 CORS，但我无法弄清楚这里发生了什么。

这是客户端请求：

        var endPoint = 'https://776v8jadw0.execute-api.us-east-1.amazonaws.com/sandbox/helpwithprogramming/contact';
        var payload = {message: 'Hello there'};
        var headers = new Headers();
        headers.append('Access-Control-Allow-Origin',  '*');
        var options = {
          method: 'POST',
          headers: headers,
          mode: 'cors',
          cache: 'default',
          body: JSON.stringify(payload)
        };

        fetch(endPoint, options)
          .then(res => {
            console.log('ok', res);
        })
        .catch(err => {
           console.log('error', err);
       });

我对 OPTIONS 方法的响应标头如下来自 API 网关：

access-control-allow-headers:Access-Control-Allow-Origin,Content-Type,Authorization,X-Amz-Date,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods:DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
access-control-allow-origin:*
content-length:0
content-type:application/json
date:Mon, 11 Dec 2017 05:33:59 GMT
status:200

执行 POST 时，我从 API 网关收到以下响应：

{message: "Hello from Lambda"}

但是，我的 fetch 调用实际上失败了，并进入了 catch 块并出现以下错误：

TypeError: Failed to fetch

Chrome 会在控制台中显示此消息：

加载失败 https://776v8jadw0.execute-api.us-east-1.amazonaws.com/sandbox/helpwithprogramming/contact: 请求中不存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:63342” 使用权。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

【问题讨论】：

尝试强制重新加载以确保在添加标头之前没有收到浏览器缓存的缓存响应。或者从其他浏览器尝试。并从您的前端代码中删除headers.append('Access-Control-Allow-Origin', '*'); 部分。您不想在请求中发送该标头：它严格来说是服务器发回的响应标头。
我能够解决它。我需要将 ('Access-Control-Allow-Origin', '*') 添加到 OPTIONS 和来自 api 网关的 POST 响应中。

标签： cors cross-domain fetch

【解决方案1】：

在 AWS 控制台中导航到 API Gateway。

选择已部署的API。
在 RESOUCES 中为 ex: GET,POST 选择 HTTP 方法，然后点击 Actions。
在 RESOURCE ACTIONS 中选择 Enable CORS 并将 '*' 添加到 Access-Control-Allow-Origin 并启用 CORS。

【讨论】：