跨域

由瀏覽器同源策略限制的一類請求場景

什么是同源策略？

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

跨域場景

URL 說明 是否允許通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不同文件或路徑 允許 http://www.domain.com/lab/c.jshttp://www.domain.com:8000/a.js http://www.domain.com/b.js 同一域名，不同端口 不允許http://www.domain.com/a.js https://www.domain.com/b.js 同一域名，不同協議 不允許http://www.domain.com/a.js http://192.168.4.12/b.js 域名和域名對應相同ip 不允許http://www.domain.com/a.js http://x.domain.com/b.js 主域相同，子域不同 不允許 http://domain.com/c.jshttp://www.domain1.com/a.js http://www.domain2.com/b.js 不同域名 不允許

還有一個就是 ajax 請求方法錯誤也會造成跨域
之前項目遇到一次
地址欄 輸入接口有數據返回
而利用ajax請求數據報跨域問題 檢查一番原來是請求方法是post， 這里改成get方法就好了

解決跨域

測試階段直接解決瀏覽器跨域 （推薦）

鼠標右鍵打開瀏覽器屬性面板

更改目標位置

--disable-web-security --user-data-dir=C:\MyChromeDevUserData

在后面加上 –disable-web-security --user-data-dir=C:\MyChromeDevUserData
注意 – 前面有個空格

c盤根目錄下創建文件夾

然后打開瀏覽器

不過有時候不顯示這個，實際以接口請求為準
請求接口若出現報跨域，則沒處理成功

當是移動端網頁真機測試時必須要后端處理接口跨域問題

比較常用的是jsonp
在框架流行的當下， 這種情況較少

原生

<script>var script = document.createElement('script');script.type = 'text/javascript';// 傳參一個回調函數名給后端，方便后端返回時執行這個在前端定義的回調函數script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';document.head.appendChild(script);// 回調執行函數function handleCallback(res) {alert(JSON.stringify(res));}</script> jQuery $.ajax({url: 'http://www.domain2.com:8080/login',type: 'get',dataType: 'jsonp', // 請求方式為jsonpjsonpCallback: "handleCallback", // 自定義回調函數名data: {} });

總結

以上是生活随笔為你收集整理的跨域与解决跨域的全部內容，希望文章能夠幫你解決所遇到的問題。

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