而Postman就没问题?
我正在尝试通过连接到内置在 Flask 中的 RESTful API 来使用 JavaScript 进行授权。 但是,当我提出请求时,我会得到以下错误:
无法加载 http://myapiurl/login。 请求的资源上没有“访问控制允许原点”头。 因此,“ 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。
When you are using they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
当您使用 postman时,不受此策略的限制。
常规 web 页面可以使用 XMLHttpRequest 对象从远程服务器发送和接收数据,但是它们受到同源策略的限制。 扩展并不是那么有限。 扩展可以与原始服务器之外的远程服务器通信,只要它首先请求跨原始权限即可。
这不是针对生产或应用程序必须显示给客户机,只有当 UI 和后端开发位于不同的服务器上并且在生产环境中它们实际上位于同一台服务器上时,这才有帮助。例如: 在为任何应用程序开发 UI 时,如果需要对其进行本地测试并将其指向后端服务器,那么这是一个完美的修复方案。 对于生产修复,CORS 头必须添加到后端服务器,以允许跨原点访问。
简单的方法是在 google chrome 中添加扩展,以允许使用 CORS 进行访问。
只要您希望允许访问没有'access-control-allow-origin'表头请求的情况下,就启用此扩展。
或者
在 Windows 中,将此命令粘贴到运行窗口中
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
这将打开一个新的 chrome 浏览器,它不允许访问“访问控制允许来源”表头的请求。
如果您可以处理 JSON 作为return,那么尝试使用 JSONP :
$.ajax({
type: "POST",
dataType: 'jsonp',
...... etc ......
了解有关使用 JSONP 的更多信息,请点击这里here:
Jsonp 的出现---- 实质上是一个双方同意的跨网站脚本黑客---- 为强大的内容混搭打开了大门。许多著名的站点提供 JSONP 服务,允许您通过预定义的 API 访问它们的内容。