为什么我的JavaScript在请求的资源中出现“No’Access-Control-Allow-Origin’标题出现错误”邮差不?

我试图通过连接到内置在Flask中RESTful API来使用JavaScript进行授权。但是,当我提出请求时,出现以下错误:

XMLHttpRequest无法加载http:// myApiUrl / login。请求的资源上没有“Access-Control-Allow-Origin”标题。因此不允许原产地’null’访问。

我知道API或远程资源必须设置标题,但为什么当我通过Chrome扩展邮件发送者发出请求时会工作?

这是请求代码:

$.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

当您使用邮递员时,他们不受此政策的限制。从跨源XMLHttpRequest引用:

常规网页可以使用XMLHttpRequest对象从远程服务器发送和接收数据,但是它们受限于相同的源策略。扩展不限于此。只要它首先请求跨源许可,扩展就可以与远程服务器进行通信。


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

简单的方法是在google chrome中添加扩展程序以允许使用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访问其内容。


如果您使用PHP,解决问题非常简单。只需在处理请求的PHP页面的开头添加以下脚本即可:

<?php header('Access-Control-Allow-Origin: *'); ?>

警告:这包含PHP文件的安全问题,可能会被攻击者调用。您必须使用会话和Cookie进行身份验证,以防止您的文件/服务受到此攻击。您的服务很容易受到跨站请求伪造(CSRF)的影响。

如果您正在使用Node-red,则必须node-red/settings.js通过取消注释以下行来在文件中允许CROS :

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

添加评论

友情链接:蝴蝶教程