目錄

什么是跨域：

跨域問題的產(chǎn)生原因：

什么標簽可以跨域

幾種解決跨域的常見方案

---

什么是跨域：

? ? ?在同一網(wǎng)頁中 訪問多個不同域名下的接口獲取數(shù)據(jù)，即不同域名或不同端口或不同協(xié)議的接口。這種現(xiàn)象就是跨域。

??? 這里的域名，同一頂級域名下不同二級域名也會出現(xiàn)跨域現(xiàn)象：

??? 即：http://www.baidu,com 和http://zhidao.baidu.com也會跨域，

??? 端口號和協(xié)議同理。

---

跨域問題的產(chǎn)生原因：

? ? ? 出于安全考慮，防止網(wǎng)絡(luò)釣魚等行為，主要是防止CSRF攻擊。瀏覽器默認開發(fā)時設(shè)置的基于XMLHttpRequest跨域校驗，各瀏覽器可以通過修改配置的方式來關(guān)閉跨域，如果有需要可以參考“引用參考1”設(shè)置。

什么標簽可以跨域

有三個標簽允許跨域加載資源：

1、<img src=“http://www.baidu.com”> 屬性用于指定圖像文件的 URL

2、<link rel="stylesheet" href="https://ss1.bdstati/css/soutu_new2_b3a7e98.css" >href 屬性規(guī)定被鏈接文檔的位置（URL）

3、<script src=“http://www.aaa.com”> 規(guī)定外部腳本文件的 URL。

從上面可以看出，主要是一些引入的圖片和js/css等腳本標簽，因為這個大部分都是需要訪問一下共用的域名。

幾種解決跨域的常見方案

1、通過后端代理的方式。即前端訪問的域名不變，根據(jù)域名后的資源路徑由后端服務(wù)器進行訪問 獲取數(shù)據(jù)后再返回給前端。

???? 這里主要有兩種方式：

??? a、只是代理訪問代理訪問可以通過nginx 配置

? /test/test.do{
?? proxy_pass? http://192.168.1.1:8080/test/test.do
}

??? b、由后端訪問然后組裝好前端需要的數(shù)據(jù)結(jié)構(gòu)進行返回。

2、jsonp的方式，這個我個人比較推薦，尤其是一些對外開放的數(shù)據(jù)。但是主要應(yīng)用于get請求，其他請求方式不起效果。

????? 具體例子可以參考下 ”引用參考2“ 中的jsonp的實現(xiàn)方式，這個我感覺是網(wǎng)上寫的比較全的例子了。

3、跨域資源共享（CROSS）

?????? Java后端的話可以在RequstMapping()請求路徑上添加@CrossOrigin這個方式去實現(xiàn)允許接口跨域訪問，通過返回請求頭,瀏覽器來判斷是否支持。

Access-Control-Allow-Credentials?

true

Access-Control-Allow-Headers	Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,T-px-Validate-Token,T-px-Post-ID,T-px-Trace-ID,T-px-Lesson-Num,T-px-Class-ID,T-px-Client-Type,T-px-Client-IP
Access-Control-Allow-Methods	GET, PUT, POST, DELETE, OPTIONS
Access-Control-Allow-Origin	*

Access-Control-Allow-Credentials? //設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請求中，一起發(fā)給服務(wù)器。

從4.2版本開始，Spring MVC對CORS提供開箱即用的支持。不用添加任何特殊配置，只需要在Spring Boot應(yīng)用的controller方法上注解@CrossOrigin，并添加CORS配置。通過注冊一個自定義addCorsMappings(CorsRegistry)方法的WebMvcConfigurer bean可以指定全局CORS配置。

???? 具體的CROSS的詳細講解可以看一下 引用參考3.

4、通過document.domain實現(xiàn)跨域訪問，這種方式的思路主要是請求域名有相同的根域名來采用。用的比較少不建議采用。

???? 可以參考 引用參考4 中的document.domain部分。

引用參考1：瀏覽器允許跨域設(shè)置（不用于生產(chǎn)環(huán)境，開發(fā)用） - LiuChunfu - 博客園Firefox之前看過FF下關(guān)閉跨域限制的方法：firefox安全性強，不允許跨域調(diào)用。Firefox 要取消XMLHttpRequest的跨域限制的話從 about:config 里設(shè)置 signehttps://www.cnblogs.com/LiuChunfu/p/8072448.html引用參考2：

XmlHttpRequest使用及“跨域”問題解決 - 咸咸海風 - 博客園https://www.cnblogs.com/651434092qq/p/11109199.html

?引用參考3：

跨域資源共享 CORS 詳解 - 阮一峰的網(wǎng)絡(luò)日志http://www.ruanyifeng.com/blog/2016/04/cors.html引用參考4：

關(guān)于跨域,以及跨域的幾種方式 - 陳詩爍 - 博客園https://www.cnblogs.com/chenshishuo/p/4919224.html

總結(jié)

以上是生活随笔為你收集整理的解决跨域常见方案（is therefore not allowed access)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。