协慌网

我试图通过连接到Flask内置的RESTful API来使用JavaScript进行授权。但是，当我发出请求时，我收到以下错误：

XMLHttpRequest 无法加载http：// myApiUrl / login 。请求的资源上不存在 “Access-Control-Allow-Origin” 标头。因此不允许原点'null' 访问。

我知道 API 或远程资源必须设置标题，但为什么在我通过 Chrome 扩展程序Postman发出请求时它可以正常工作？

这是请求代码：

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

如果我理解正确，那么您正在将XMLHttpRequest发送到与您的页面不同的域。因此浏览器阻止它，因为出于安全原因，它通常允许同一来源的请求。当您想要执行跨域请求时，您需要执行不同的操作。有关如何实现这一目标的教程是使用 CORS 。

当您使用邮递员时，他们不受此政策的限制。引自Cross-Origin XMLHttpRequest ：

常规网页可以使用 XMLHttpRequest 对象从远程服务器发送和接收数据，但它们受到相同原始策略的限制。扩展不是那么有限。扩展可以与其来源之外的远程服务器通信，只要它首先请求跨源权限即可。

这不是生产的修复或者必须向客户端显示应用程序时，这仅在 UI 和后端开发位于不同服务器上并且在生产中它们实际位于同一服务器上时才有用。例如：在为任何应用程序开发 UI 时，如果需要在本地测试它指向后端服务器，在这种情况下，这是一个完美的修复。 对于生产修复，必须将 CORS 头添加到后端服务器以允许跨源访问。

简单的方法是在谷歌浏览器中添加扩展名以允许使用 CORS 进行访问。

（ https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US ）

只要您希望不允许访问“access-control-allow-origin”标头请求，只需启用此扩展。

要么

在 Windows 中，将此命令粘贴到运行窗口中

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

这将打开一个新的Chrome浏览器，允许访问没有'access-control-allow-origin'标头请求。

如果你可以回答JSON ，那么尝试使用JSONP （注意结尾的P ）来表达域之间的说话：

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

在此处了解有关使用 JSONP 的更多信息：

JSONP 的出现 - 本质上是一个双方同意的跨站点脚本黑客 - 为强大的内容混搭打开了大门。许多着名网站都提供 JSONP 服务，允许您通过预定义的 API 访问其内容。