基本概念

跨域(CORS)請求：同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。

瀏覽器和服務器實現跨域(CORS)判定的原理

問題描述

axios提示跨域 但是返回的請求是200并且有數據

?

問題分析

同源策略限制以下幾種行為：

1.) Cookie、LocalStorage 和 IndexDB 無法讀取

2.) DOM 和 Js對象無法獲得

3.) AJAX 請求不能發送

常見跨域場景

1.)同一域名下的不同文件或路徑，允許訪問。

http://www.domain.com/a.js

http://www.domain.com/b.js

http://www.domain.com/lab/c.js

2.)同一域名下的不同端口， 不允許訪問。

http://www.domain.com:8000/a.js

http://www.domain.com/b.js

3.)同一域名下的不同協議， 不允許訪問。

http://www.domain.com/a.js

https://www.domain.com/b.js

4.)同一ip地址下的不同域名之間，不允許訪問。

http://www.domain.com/a.js

http://192.168.4.12/b.js

5.) 不同域名之間不允許訪問。

http://www.domain1.com/a.js

http://www.domain2.com/b.js

解決方案

方法一：通過在被請求的資源文件中添加 'Access-Control-Allow-Origin’

(1)如果被請求的是靜態HTML文件，則需要只需要在被請求的HTML文件中加上一下標簽。

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

(2)如果被請求的是java接口，則可以在響應頭中加上：

response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");?

(3)如果被請求的是.net接口，則可以在響應頭中加上：

Response.AddHeader("Access-Control-Allow-Origin", "*");

方法二：通過jsonp請求

跨域原理： 通常為了減輕web服務器的負載，我們把js、css，img等靜態資源分離到另一臺獨立域名的服務器上，在html頁面中再通過相應的標簽從不同域名下加載靜態資源，而被瀏覽器允許，基于此原理，我們可以通過動態創建script，再請求一個帶參網址實現跨域通信。

原生實現：

?<script>var script = document.createElement('script');script.type = 'text/javascript';// 傳參并指定回調執行函數為onBackscript.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';document.head.appendChild(script);// 回調執行函數function onBack(res) {alert(JSON.stringify(res));}</script>

jQuery實現：

$.ajax({url: 'http://www.domain2.com:8080/login',type: 'get',dataType: 'jsonp', ?// 請求方式為jsonpcrossDomain: true,success: function(data) {},data: {} });

方法三：通過設置代理

?跨域原理： 同源策略是瀏覽器的安全策略，不是HTTP協議的一部分。服務器端調用HTTP接口只是使用HTTP協議，不會執行JS腳本，不需要同源策略，也就不存在跨越問題。

以下提供java/.net跨域文件的源碼，請自行發布使用。請求代理文件源碼地址：

https://github.com/muziye2013/CrossDomainAccessProxy

a. 如果是.NET開發環境，請將下載的“DotNet”源碼發布為網站

并將網站的物理路徑，指向源碼DotNet地址:

修改index.html頁面中被請求的資源，在瀏覽器中訪問index.html頁面進行測試。

?var testUrl="http://172.17.0.130/***/query";//修改測試服務地址

b.如果是Java開發環境，請將下載的“Java”源碼放在tomcat網站下的webapps目錄下，

修改index.html頁面中被請求的資源，啟動tomcat，在瀏覽器中訪問index.html頁面進行測試。

方法四：通過Nginx反向代理?

跨域原理： 同源策略是瀏覽器的安全策略，不是HTTP協議的一部分。服務器端調用HTTP接口只是使用HTTP協議，不會執行JS腳本，不需要同源策略，也就不存在跨越問題。

實現思路：通過nginx配置一個代理服務器（域名與domain1相同，端口不同）做跳板機，反向代理訪問domain2接口，并且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。

nginx具體配置：

#proxy服務器 server {listen 81;server_name www.domain1.com;location / {proxy_pass http://www.domain2.com:8080; #反向代理proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名index index.html index.htm;# 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用add_header Access-Control-Allow-Origin http://www.domain1.com; #當前端只跨域不帶cookie時，可為*add_header Access-Control-Allow-Credentials true;} }

https://segmentfault.com/a/1190000011145364

方法五：Spring Boot解決方案

參考文章

https://segmentfault.com/a/1190000011145364

https://segmentfault.com/q/1010000015817945

https://blog.csdn.net/dear_little_bear/article/details/83999391

https://blog.csdn.net/zmx729618/article/details/53319383

https://blog.csdn.net/tg928600774/article/details/80325040

https://blog.csdn.net/hyt941026/article/details/82148368

https://www.jianshu.com/p/e935a8f81971

https://www.cnblogs.com/xuanmanstein/p/10574805.html

總結

以上是生活随笔為你收集整理的跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。