跨域问题解决方案Access to XMLHttpRequest from origin has been blocked by CORS..Access-Control-Allow-Origin

以你之姓@ 2023-02-14 05:47 18阅读 0赞

**跨域问题解决方案**

在浏览器的Console模板中，查看报错信息如下：

Access to XMLHttpRequest at '\*' from origin '\*' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

![20190302154844259.png][]

从源'本地路径'访问 '目标路径(请求链接)'文本传输请求已被CORS策略阻塞:对预置请求的响应未通过访问控制检查:请求的资源上不存在'Access- control - allow - origin '报头。

### 错误原因： ###

本地路径和目标路径不是同一个域名下引起的跨域问题，并且，就算两个域名是同一个一级域名不同二级域名的时候，例如 **a.baidu.com** 和 **b.baidu.com** 是属于**不同域**的，也是会出现这个问题

### 介绍 ###

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，[XMLHttpRequest][] 和[Fetch API][] 遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

（注：这段描述不准确，并不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。这就是为什么明明调试的时候后端接收到了请求并且返回了数据，但是浏览器还是报错的原因。）

**[CORS][]**（跨源资源共享）是一个系统，由传输[HTTP标头][HTTP] 组成，用于确定浏览器是否阻止前端JavaScript代码访问跨源请求的响应

该[同源安全政策][Link 1][(同源策略)][Link 1]禁止以资源跨域访问。但CORS使Web服务器能够表示他们希望选择允许跨资源访问其资源。

跨域资源共享([CORS][]) 是一种机制，它使用额外的 [HTTP][HTTP 1] 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器**不同的域、协议或端口**请求一个资源时，资源会发起一个**跨域 HTTP 请求**。

比如，站点 http://domain-a.com 的某 HTML 页面通过 [<img> 的 src ][img_ _ src]请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTU5MzMx_size_16_color_FFFFFF_t_70][]

跨域资源共享（ [CORS][] ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 [`XMLHttpRequest`][XMLHttpRequest] 或 [Fetch][Fetch API] ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。

### 同源策略如下： ###

<table> 
 <tbody> 
  <tr> 
   <td style="width:284px;"><strong>URL</strong></td> 
   <td style="width:278px;"><strong>说明</strong></td> 
   <td style="width:342px;"><strong>是否允许通信</strong></td> 
  </tr> 
  <tr> 
   <td style="width:284px;"><span style="color:#7c79e5;">http://www.a.com</span>/a.js<br><span style="color:#7c79e5;">http://www.a.com</span>/b.js</td> 
   <td style="width:278px;">同一域名下</td> 
   <td style="width:342px;">允许</td> 
  </tr> 
  <tr> 
   <td style="width:284px;"><span style="color:#7c79e5;">http://www.a.com</span>/lab/a.js<br><span style="color:#7c79e5;">http://www.a.com</span>/script/b.js</td> 
   <td style="width:278px;">同一域名下不同文件夹</td> 
   <td style="width:342px;"> <p>允许</p> </td> 
  </tr> 
  <tr> 
   <td style="width:284px;"><span style="color:#7c79e5;">http://www.a.com:8000</span>/a.js<br><span style="color:#7c79e5;">http://www.a.com</span>/b.js</td> 
   <td style="width:278px;">同一域名，不同端口</td> 
   <td style="width:342px;">不允许</td> 
  </tr> 
  <tr> 
   <td style="width:284px;"><span style="color:#7c79e5;">http://www.a.com</span>/a.js<br><span style="color:#7c79e5;">https://www.a.com</span>/b.js</td> 
   <td style="width:278px;">同一域名，不同协议</td> 
   <td style="width:342px;">不允许</td> 
  </tr> 
  <tr> 
   <td style="width:284px;"><span style="color:#7c79e5;">http://www.a.com</span>/a.js<br><span style="color:#7c79e5;">http://70.32.92.74</span>/b.js</td> 
   <td style="width:278px;">域名和域名对应ip</td> 
   <td style="width:342px;">不允许</td> 
  </tr> 
  <tr> 
   <td style="width:284px;"><span style="color:#7c79e5;">http://www.a.com</span>/a.js<br><span style="color:#7c79e5;">http://script.a.com</span>/b.js</td> 
   <td style="width:278px;">主域相同，子域不同</td> 
   <td style="width:342px;">不允许</td> 
  </tr> 
  <tr> 
   <td style="width:284px;"><span style="color:#7c79e5;">http://www.a.com</span>/a.js<br><span style="color:#7c79e5;">http://a.com</span>/b.js</td> 
   <td style="width:278px;">同一域名，不同二级域名（同上）</td> 
   <td style="width:342px;">不允许（cookie这种情况下也不允许访问）</td> 
  </tr> 
  <tr> 
   <td style="width:284px;"><span style="color:#7c79e5;">http://www.a.com</span>/a.js<br><span style="color:#7c79e5;">http://www.b.com</span>/b.js</td> 
   <td style="width:278px;">不同域名</td> 
   <td style="width:342px;">不允许</td> 
  </tr> 
 </tbody> 
</table>

**特别注意两点：**  
第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，  
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

### 前端解决跨域问题： ###

**一、document.domain + iframe (只有在主域相同的时候才能使用该方法)**

1.在www.a.com/a.html中

document.domain = 'a.com';
    var ifr = document.createElement('iframe');
    ifr.src = 'http://www.script.a.com/b.html';
    ifr.display = none;
    document.body.appendChild(ifr);
    ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;
        //在这里操作doc，也就是b.html
        ifr.onload = null;
    };

2.在www.script.a.com/b.html中：

document.domain = 'a.com';

### 二、动态创建script ###

这个没什么好说的，因为script标签不受同源策略的限制。

### 三、 location.hash + iframe ###

原理是利用location.hash来进行传值。  
假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。  
1) cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面  
2) cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据  
3) 同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一旦有变化则获取获取hash值  
注：由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe

代码如下：  
先是a.com下的文件cs1.html文件：

cnblogs.com域名下的cs2.html:

//模拟一个简单的参数处理操作
    switch(location.hash){
        case '#paramdo':
            callBack();
            break;
        case '#paramset':
            //do something……
            break;
    }
    function callBack(){
        try {
            parent.location.hash = 'somedata';
        } catch (e) {
            // ie、chrome的安全机制无法修改parent.location.hash，
            // 所以要利用一个中间的cnblogs域下的代理iframe
            var ifrproxy = document.createElement('iframe');
            ifrproxy.style.display = 'none';
            ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下        document.body.appendChild(ifrproxy);
        }
    }

a.com下的域名cs3.html

//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
    parent.parent.location.hash = self.location.hash.substring(1);

### 四、window.name + iframe ###

window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。  
1) 创建a.com/cs1.html  
2) 创建a.com/proxy.html，并加入如下代码

<head>
      <script>
      function proxy(url, func){
        var isFirst = true,
            ifr = document.createElement('iframe'),
            loadFunc = function(){
              if(isFirst){
                ifr.contentWindow.location = 'http://a.com/cs1.html';
                isFirst = false;
              }else{
                func(ifr.contentWindow.name);
                ifr.contentWindow.close();
                document.body.removeChild(ifr);
                ifr.src = '';
                ifr = null;
              }
            };
    
        ifr.src = url;
        ifr.style.display = 'none';
        if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc);
        else ifr.onload = loadFunc;
    
        document.body.appendChild(iframe);
      }</script>
    </head>
    <body>
      <script>
        proxy('http://www.baidu.com/', function(data){
          console.log(data);
        });
      </script>
    </body>

3 在b.com/cs1.html中包含：

###  ###

### 五、postMessage（HTML5中的XMLHttpRequest Level 2中的API） ###

1) a.com/index.html中的代码：

2) b.com/index.html中的代码：

### 六、CORS ###

CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

IE中对CORS的实现是xdr

var xdr = new XDomainRequest();
    xdr.onload = function(){
        console.log(xdr.responseText);
    }
    xdr.open('get', 'http://www.baidu.com');
    ......
    xdr.send(null);

其它浏览器中的实现就在xhr中

实现跨浏览器的CORS

###  ###

### 七、JSONP ###

JSONP包含两部分：回调函数和数据。

回调函数是当响应到来时要放在当前页面**被调用**的函数。

数据就是传入回调函数中的json数据，也就是回调函数的参数了。

jsonp虽然很简单，但是有如下缺点：

1）安全问题(请求代码中可能存在安全隐患)

2）要确定jsonp请求是否失败并不容易

### 八、 **web sockets** ###

eb sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

只有在支持web socket协议的服务器上才能正常工作。

var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
    socket.send('hello WebSockt');
    socket.onmessage = function(event){
        var data = event.data;
    }

参考资料：

HTTP访问控制（CORS） [https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access\_control\_CORS][https_developer.mozilla.org_zh-CN_docs_Web_HTTP_Access_control_CORS]

CORS（跨源资源共享） [https://developer.mozilla.org/en-US/docs/Glossary/CORS][CORS]

[20190302154844259.png]: https://img-blog.csdnimg.cn/20190302154844259.png
[XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
[Fetch API]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[CORS]: https://developer.mozilla.org/en-US/docs/Glossary/CORS
[HTTP]: https://developer.mozilla.org/en-US/docs/Glossary/HTTP_header
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
[HTTP 1]: https://developer.mozilla.org/en-US/docs/Glossary/HTTP
[img_ _ src]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Img#Attributes
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTU5MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190302155922223.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTU5MzMx,size_16,color_FFFFFF,t_70
[https_developer.mozilla.org_zh-CN_docs_Web_HTTP_Access_control_CORS]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

跨域问题解决方案Access to XMLHttpRequest from origin has been blocked by CORS..Access-Control-Allow-Origin

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Cont

相关【解决问题】跨域图片跨域问题 has been blocked by CORS policy No-Access-Control-Allow-Origin

相关解决跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present

相关 Access to XMLHttpRequest at ‘http://xx‘ from origin ‘http://xx‘ has been blocked by CORS policy:

相关 ElementUI项目请求SpringBoot后台项目时提示：Access to XMLHttpRequest at from origin has been blocked by CORS

相关 Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been been blocked by CORS policy

相关 Access to XMLHttpRequest at xxxx from origin ‘null‘ has been blocked by CORS policy:

相关解决前端跨域：has been blocked by CORS policy No Access-Control-Allow-Origin header

相关跨域问题解决方案Access to XMLHttpRequest from origin has been blocked by CORS..Access-Control-Allow-Origin

相关 SpringBoot 跨域问题：Access to XMLHttpRequest at ‘‘ from origin ‘‘ has been blocked by CORS policy