javascript - “No 'Access-Control-Allow-Origin'

  显示原文与译文双语对照的内容

Flask, 我试着做授权使用 JavaScript 通过连接到 restAPI 建成。

结果是:


XMLHttpRequest cannot load http://myApiUrl/login. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.

我知道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 。 因此浏览器阻塞了它,因为它通常允许在相同的来源中请求安全原因。 当你想做cross-domain请求时,你需要做一些不同的事情。 关于如何实现的教程,

当你使用邮局时,他们不受这里策略限制。 在 XMLHttpRequest Cross-Origin, quoted:

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

使用 JSONP ( 注意末尾的英镑) domains,之间朗读的方法如果你能处理 JSONP 作为回报,然后 try:


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

" —的出现本质上是一个一致同意的cross-site脚本 hack —已经打开了强大的内容 mashup 。 "

https://learn.jquery.com/ajax/working-with-jsonp/

使用Ajax有一个cross-domain问题。 你必须确定你正在访问你的文件在同一 http:// 路径而不 www. ( 或者从 http://www. 访问并投递到包含 www.的相同路径) 哪个浏览器将作为另一个域访问通过一个 www. 时视为路径,所以你看看问题出在哪儿。 你正投递到另一个域,由于原始问题,浏览器阻塞了流。

如果 API 未放置在你正请求的同一主机上,则流被阻塞,你需要找到另一种与API通信的方式。

尝试 XDomain

摘要:纯 JavaScript CORS替代/polyfill 。 不需要服务器配置- 只需在你希望与之通信的域上添加一个 proxy.html 。 这个库使用XHook来挂接所有 XHR,所以XDomain应该与任何库一起工作。

使用AngularJS访问我的API时遇到了一个问题。 在 SoapUI 5.0和ColdFusion中同样的请求。 我的获取方法已经有Access-Control-Allow-Origin头。

我发现,的AngularJS做了一个"试用版"选项请求 。 默认情况下,ColdFusion生成选项方法,但它没有太多的信息,这些标头特别。 错误是为响应那个选项而生成的,而不是我有意调用的。 在将下面的选项方法添加到我的API之后,问题得到了解决。


<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
 <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
 <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS"> 
 <cfheader name="Access-Control-Allow-Origin" value="*"> 
 <cfheader name="Access-Control-Max-Age" value="360"> 
</cffunction>

我尝试了以下解决方案,这里方法仅在你的磅的服务器运行在本地时有效

  1. 在 web.xml 中放置以下行

    <filter> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> </filter> <filter-mapping> <filter-name>CORS</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

  2. 下载 cors-filter-2.1.2java-property-utils-1.9.1 web并放入库
  3. 打开浏览器以允许使用 terminal(mac ) 中的下列代码进行访问控制

    
    /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --allow-file-access-from-files
    
    
...