我试图通过连接到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);
});
显然,我完全误解了它的语义.我想到了这样的事情:
好吧,我错了.它根本不起作用.所以,我已经阅读了跨源资源共享,并尝试在w3c推荐中阅读跨源资源共享
有一件事是肯定的 - 我仍然不明白我应该如何使用这个标题.
我完全控制了站点A和站点B.如何启用从站点A下载的javascript代码以使用此标头访问站点B上的资源？
PS
我不想使用JSONP.
有没有办法允许多个跨域使用Access-Control-Allow-Origin标头？
我知道了*,但它太开放了.我真的想只允许一些域名.
举个例子,像这样:
Access-Control-Allow-Origin: http://domain1.example, http://domain2.example
我已经尝试过上面的代码,但它似乎不适用于Firefox.
是否可以指定多个域,或者我只坚持一个？
我试图在我的Node.js应用程序中支持使用Express.js Web框架的CORS.我已经阅读了有关如何处理此问题的Google小组讨论,并阅读了一些有关CORS如何工作的文章.首先,我这样做了(代码是用CoffeeScript语法编写的):
app.options "*", (req, res) ->
res.header 'Access-Control-Allow-Origin', '*'
res.header 'Access-Control-Allow-Credentials', true
# try: 'POST, GET, PUT, DELETE, OPTIONS'
res.header 'Access-Control-Allow-Methods', 'GET, OPTIONS'
# try: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
res.header 'Access-Control-Allow-Headers', 'Content-Type'
# ...
它似乎不起作用.好像我的浏览器(Chrome)没有发送初始OPTIONS请求.当我刚刚更新资源块时,我需要将跨源GET请求提交到:
app.get "/somethingelse", (req, res) ->
# ...
res.header 'Access-Control-Allow-Origin', '*'
res.header 'Access-Control-Allow-Credentials', true
res.header 'Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'
res.header 'Access-Control-Allow-Headers', 'Content-Type'
# ...
它有效(在Chrome中).这也适用于Safari.
我读过......
在实现CORS的浏览器中,每个跨源GET或POST请求前面都有一个OPTIONS请求,用于检查GET或POST是否正常.
所以我的主要问题是,为什么在我的案例中似乎没有发生这种情况？为什么我的app.options块没有被调用？为什么我需要在主app.get块中设置标题？
我正在开发一个页面,通过jQuery的AJAX支持从Flickr和Panoramio中提取图像.
Flickr端工作正常,但当我尝试$.get(url, callback)从Panoramio时,我在Chrome的控制台中看到一个错误:
XMLHttpRequest无法加载http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150.Access-Control-Allow-Origin不允许使用null.
如果我直接从浏览器查询该URL,它可以正常工作.发生了什么,我可以解决这个问题吗？我是不是错误地编写了我的查询,或者这是因为Panoramio会妨碍我正在尝试做的事情？
Google没有在错误消息上显示任何有用的匹配项.
编辑
以下是一些显示问题的示例代码:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';
$.get(url, function (jsonp) {
var processImages = function (data) {
alert('ok');
};
eval(jsonp);
});
});
您可以在线运行该示例.
编辑2
感谢Darin对此的帮助. 上面的代码错了. 请改用:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';
$.get(url, function (data) {
// can use 'data' in here...
});
});
我使用ngResource在Amazon Web Services上调用REST API时收到此错误:
XMLHttpRequest无法加载 http://server.apiurl.com:8000/s/login?login=facebook.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" :HTTP //本地主机,因此"是不允许访问. 错误405
服务:
socialMarkt.factory('loginService', ['$resource', function($resource){
var apiAddress = "http://server.apiurl.com:8000/s/login/";
return $resource(apiAddress, { login:"facebook", access_token: "@access_token" ,facebook_id: "@facebook_id" }, {
getUser: {method:'POST'}
});
}]);
控制器:
[...]
loginService.getUser(JSON.stringify(fbObj)),
function(data){
console.log(data);
},
function(result) {
console.error('Error', result.status);
}
[...]
我正在使用Chrome,我不知道还有什么可以解决这个问题.我甚至将服务器配置为接受来自源的头文件localhost.
我正在构建一个Web API.我发现每当我使用Chrome进行POST,GET到我的API时,总会在真实请求之前发送OPTIONS请求,这非常烦人.目前我让服务器忽略任何OPTIONS请求.现在我的问题是发送OPTIONS请求以加倍服务器负载是什么好事？有没有办法完全阻止浏览器发送OPTIONS请求？
我正在尝试从HP Alm的REST API中获取一些数据.它适用于小卷曲脚本 - 我得到了我的数据.
现在使用JavaScript,fetch和ES6(或多或少)似乎是一个更大的问题.我一直收到此错误消息:
无法加载Fetch API.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许来源" http://127.0.0.1:3000 "访问.响应具有HTTP状态代码501.如果不透明响应满足您的需要,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.
我知道这是因为我试图从我的localhost中获取该数据,解决方案应该使用CORS.现在我以为我确实这样做了,但不管怎么说它要么忽略我在标题中写的内容,要么问题是别的什么？
那么,是否存在实施问题？我做错了吗？遗憾的是我无法检查服务器日志.我真的有点卡在这里.
function performSignIn() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
headers.append('GET', 'POST', 'OPTIONS');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch(sign_in, {
//mode: 'no-cors',
credentials: 'include',
method: 'POST',
headers: headers
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Authorization failed : ' + error.message));
}
我正在使用Chrome.我也尝试使用Chrome CORS插件,但后来我收到另一条错误消息:
当请求的凭据模式为"include"时,响应中"Access-Control-Allow-Origin"标头的值不能是通配符"*".因此,不允许来源" http://127.0.0.1:3000 "访问.XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.
跨源资源共享是一种允许网页将XMLHttpRequests发送到另一个域(来自维基百科)的机制,这非常重要(来自我:).
在过去的几天里,我一直在调整CORS,我想我对一切运作方式都有很好的理解.
所以我的问题不是关于CORS /预检如何工作,而是关于将预检作为新请求类型的原因.我没有看到任何理由为什么服务器A需要向服务器B发送预检(PR)以确定是否接受真实请求(RR) - B当然可以接受/拒绝RR而不用任何先前的公关.
经过相当多的搜索,我在www.w3.org(7.1.5)上找到了这条信息:
为了保护资源免受在此规范存在之前不能源自某些用户代理的跨源请求,进行预检请求以确保资源知道此规范.
我发现这是最难理解的句子.我的解释(应该更好地称之为'最佳猜测')是关于保护服务器B免受来自服务器C的不知道规范的请求.
有人可以解释一个场景/显示PR + RR解决的问题比单独的RR更好吗？
Bootstrapcdn最近改变了他们的链接.它现在看起来像这样:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
这些integrity和crossorigin属性是什么意思？它们如何影响样式表的加载？