`

XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

阅读更多

在Chrome浏览器中,如果想通过AJAX请求不同域中的资源,很可能就会遇到 “Origin null is not allowed by Access-Control-Allow-Origin” 的错误。

这是因为在新版本浏览器中安全策略引起。简单的说,如果XMLHttpRequest 请求的URL和当前页面不同一个域中时,浏览器会检测响应http header中有没有 Access-Control-Allow-Origin项,如果此项值为空或者与当前页面的域不匹配时,就会报此错误。

 

W3C标准中有个叫Cross Origin Resource Sharing (CORS)的东东用来解决此问题。

简单的说在目标资源返回的http头中需要包含有“Access-Control-Allow-Origin”项,并且其值格需要能匹配请求源页面域。

如在 http://a.com/default.html 页面中通过 ajax 获取 http://b.com/demo.aspx 页面的内容,那么响应http header中Access-Control-Allow-Origin就必须能匹配  http://a.com,否则就会出现以上错误。

添加此 http header的方法有几种:

 

$.ajax, $.post, $.get访问远程地址时可能报错:

 

XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

 

这是JS跨域访问产生的问题,解决办法要修改远程源代码:

 

1.请求的url指向PHP页面时,在PHP中添加 header("Access-Control-Allow-Origin: *");

 

2.html时,添加 <meta http-equiv="Access-Control-Allow-Origin" content="*">

分享到:
评论

相关推荐

    Access-Control-Allow-Origin跨域问题的终极解决,给自己做备份

    2. 前端配置:在前端,使用现代的Fetch API或XMLHttpRequest时,可以通过设置withCredentials标志,配合服务器端设置Access-Control-Allow-Credentials,实现带有Cookie的跨域请求。 3. 预检请求(Preflight ...

    allow-cors-access-control插件

    在这个例子中,`mode: 'cors'`使得请求遵循CORS规则,服务器必须返回相应的`Access-Control-Allow-Origin`头,否则浏览器会阻止返回的数据被JavaScript使用。 总结来说,“allow-cors-access-control插件”是一个...

    Allow-Control-Allow- Origin.zip

    7. **其他CORS相关响应头**:除了"Access-Control-Allow-Origin",还有"Access-Control-Allow-Methods"(允许的方法)、"Access-Control-Allow-Headers"(允许的请求头)等,服务器可以根据需求设置。 8. **安全...

    Apache中配置支持CORS(跨域资源共享)实例

    当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的问题,如果用jsonp或者proxy的方式进行修改的话未免需要太大的工程量,所以采用...

    Nginx解决转发地址时跨域的问题

    Origin 'null' is therefore not allowed access. 这就是跨域问题。解决方案有不少,比较好的是服务器端配置CORS,但要求服务器端做更改。如果在不需要更改服务器端的情况下解决呢?尤其是需要在

    异常 AJAX 跨域请求报:No ‘Access-Control-Allow-Origin‘ header is present

    当你尝试使用AJAX(异步JavaScript和XML)进行跨域请求时,如果服务器没有正确设置允许跨域的响应头,浏览器就会抛出“No ‘Access-Control-Allow-Origin‘ header is present”的错误。这个错误表明服务器返回的...

    Allow-Control-Allow-Origin

    res.header("Access-Control-Allow-Origin", "*"); // 可以替换为特定域名 res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); ``` 这将允许所有源...

    跨域Access-Control-Allow-Origin解决方案.docx

    - 浏览器控制台通常会显示类似的错误消息:“XMLHttpRequest cannot load [URL] No 'Access-Control-Allow-Origin' header is present on the requested resource”。 #### 三、解决跨域问题的方法 **1. 修改后端...

    iTunesGraphics:使用 Three.JS 可视化 iTunes API 请求的 3D 工具

    Origin [...] is not allowed by Access-Control-Allow-Origin. XMLHttpRequest cannot load. Origin [...] is not allowed by Access-Control-Allow-Origin. 非常占用 CPU:高分辨率时缓慢,滞后很快。 可能的...

    SRC挖掘经验-cors劫持账户.docx

    在 CORS 机制中,服务器端需要在响应头中增加 Access-Control-Allow-Origin 字段,以指定允许访问的源。例如: Access-Control-Allow-Origin: * 这表示允许所有源访问该资源。如果需要指定特定的源,可以写入特定...

    cesium跨域加载问题

    &lt;param-value&gt;Access-Control-Allow-Origin,Access-Control-Allow-Credentials&lt;/param-value&gt; &lt;/init-param&gt; &lt;init-param&gt; &lt;param-name&gt;cors.support.credentials&lt;/param-name&gt; &lt;param-value&gt;true&lt;/param-value...

    解决openlayers跨域访问的解决方案

    对于CORS,服务器必须返回`Access-Control-Allow-Origin:*`或指定你的源。 ```javascript var layer = new ol.layer.Tile({ source: new ol.source.OSM({ url: 'your_wms_url', crossOrigin: 'anonymous' // ...

    实现跨域例子内附说明.zip

    在服务器端,你需要在响应头中添加`Access-Control-Allow-Origin`字段,指定允许跨域的源。例如,允许所有域访问: ``` Access-Control-Allow-Origin: * ``` 或者只允许特定域访问: ``` Access-Control-...

    CORS Unblock-crx插件

    默认值:Access-Control-Allow-Origin:'*'Access-Control-Allow-Methods:'GET,PUT,POST,DELETE,HEAD,OPTIONS,PATCH'要报告错误,请使用:https://github.com / balvin-perrie / Access-Control-Allow-Origin...

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    在本文中,我们将讨论 Vue 项目中遇到的跨域问题及解决方法,包括 CORS 预检请求、Access-Control-Allow-Origin、Access-Control-Allow-Credentials 等知识点。 CORS 预检请求 CORS(Cross-Origin Resource ...

    22-09-25-05_UserVue( uin-app本地主机数据跨域(Cors)数据交互实现之--后端)

    1、 通过向浏览器中安装指定的插件,解决跨域问题:Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head_一觉睡过头的菜鸡的博客-CSDN博客_access to ...

    golang实现跨域访问的方法

    `Access-Control-Allow-Origin`设为`*`表示允许所有源访问,若需要限制特定源,可以将其替换为实际的域名。`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`分别指定了允许的HTTP方法和请求头。`...

    跨域请求解决方案源代码(JSONP,CORS)

    服务器需要设置适当的响应头`Access-Control-Allow-Origin`,表明哪些源可以访问其资源。例如,如果希望所有源都可以访问,设置为`*`;若仅限特定源,如`http://client-origin.com`,则设置为该URL。 以下是一个...

    ajax跨域访问

    Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: Content-Type ``` ### 4. 代理服务器 当目标服务器不支持CORS或者无法修改其配置时,可以通过在...

Global site tag (gtag.js) - Google Analytics