AWS CORS 问题:即使在获得 200 状态代码后,Ajax 响应也会出现错误

Posted

技术标签:

【中文标题】AWS CORS 问题:即使在获得 200 状态代码后,Ajax 响应也会出现错误【英文标题】:AWS CORS issue: Ajax response comes as Error even after getting 200 status code 【发布时间】:2017-05-04 12:59:49 【问题描述】:

我正在尝试在 ajax 的帮助下调用 API。

$.ajax(
        url:url,
        type: 'POST',
        data: JSON.stringify(data),
        dataType: 'json',
        async: false,
        success: function(data, statusText, xhr) 
            console.log("Calling success");
            console.log(arguments);
            console.log(data.status);
        ,
        complete: function(data, statusText, xhr) 
            console.log("Calling Complete");
            console.log(arguments);
            console.log(data.status);
        ,
        error: function(data, statusText, xhr) 
            console.log("Calling error");
            console.log(arguments);
            console.log(data.status);
        
    );

调用 ajax 后,这是 firefox 中的响应:

您可以在图片中看到,我收到了200 statuscode,在响应中,我收到了我的 JSON 数据。

下面是调用ajax后的控制台截图。

下面是错误对象:

Object  readyState: 0, getResponseHeader: .ajax/v.getResponseHeader(), getAllResponseHeaders: .ajax/v.getAllResponseHeaders(), setRequestHeader: .ajax/v.setRequestHeader(), overrideMimeType: .ajax/v.overrideMimeType(), statusCode: .ajax/v.statusCode(), abort: .ajax/v.abort(), state: .Deferred/d.state(), always: .Deferred/d.always(), then: .Deferred/d.then(), 11 more… 

挖掘对象后发现的错误:

Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'url I passed in ajax'. at Object.send (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:14955) at Function.ajax (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:10579) at htmlButtonElement.<anonymous> (http://mywebsitestatic.s3-website-us-west-2.amazonaws.com/:258:4) at HTMLButtonElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:3:6404) at HTMLButtonElement.r.handle (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:3:3179)

任何想法是什么错误。

我尝试从 ***.com 引用许多问题,但没有一个与我的场景匹配。 谁能告诉我哪里出错了?

【问题讨论】:

API好像返回错误,你有权限访问服务端代码吗? inspect 元素中的响应选项卡没有显示任何错误,实际上它显示了我们从响应中获取的数据。@robertc 那么控制台中带有1: "error"属性的对象是什么? 您调用的 URL 是否与托管网站的 URL 相同?如果不是,您可能会被同源策略阻止 @robertc 让我找到错误对象 【参考方案1】:

这是一个Cross Origin Resource Sharing (CORS) 问题。要修复它,如果可以,您必须在服务器中添加以下 2 个响应标头:

setHeader("Access-Control-Allow-Origin:", "origin url of your site");
setHeader("Access-Control-Allow-Methods", "GET, POST, PUT");

要确认这是CORS 问题,您可以通过在chrome 中通过此安全检查,方法是从下面的控制台打开它并试一试网址,

窗户:

chrome.exe --allow-file-access-from-files

chrome.exe --allow-file-access-from-files --disable-web-security

苹果机:

open /Applications/Google\ Chrome.app/ --args --allow-file-access-from-files

注意:修复方法是在您尝试从 JQuery POST 请求访问的服务器中设置上述响应标头。

启用 CORS 的 AWS 链接

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

参考文献:(了解更多关于CORS

Cross Origin Request Sharing

Cross Origin Request Sharing

Same Origin Policy

【讨论】:

我怀疑这个问题不仅在 Chrome 上,而且在所有浏览器上都存在。这是普遍问题吗? 这是CORS 的安全问题,所有最新的浏览器都会阻止它。您应该在您调用的服务器中设置上述两个标头以允许访问。为了确认这是 CORS 问题,我告诉你从上面的控制台打开 chrome。 我给了你更多的参考网址来了解CORS是什么,你可以参考一下。 添加到服务器是什么意思?很抱歉问你这样的问题,但我在 AWS s3 上托管这个站点并使用 AWS API 网关和 AWS Lambda。真的不知道在哪里添加它。 首先您应该通过参考我提供的 URL 来尝试了解 CORS 是什么。然后查看AWS 文档关于CORS 以及如何在那里添加上述标题。

以上是关于AWS CORS 问题:即使在获得 200 状态代码后,Ajax 响应也会出现错误的主要内容,如果未能解决你的问题,请参考以下文章

Breeze 错误消息“;”在 Chrome 中状态为 OK

Cors Post 请求上的 Axios 网络错误,状态码为 200

具有自定义授权者和 CORS 间歇性 200 然后 403 然后 200 的 AWS API 网关 ...奇怪

跨域请求被阻止,即使它以 200 ok 状态码响应

aws cognito && apiGateway 返回状态 401

AWS API Gateway API 密钥与 Cors