最近在項目中發現了一個跨域問題。
後臺和前端都設置了跨域仍然報跨域
爲什麼會有跨域問題
出於瀏覽器的同源策略限制。同源策略(Sameoriginpolicy)是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的,瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的javascript腳本和另外一個域的內容進行交互。所謂同源(即指在同一個域)就是兩個頁面具有相同的協議(protocol),主機(host)和端口號(port)
經常見的跨域場景
當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即爲跨域
URL | 說明 | 是否允許通信 |
---|---|---|
http://www.domain.com/a.js http://www.domain.com/b.js http://www.domain.com/lab/c.js | 同一域名,不同文件或路徑 | 允許 |
http://www.domain.com:8000/a.js http://www.domain.com/b.js | 同一域名,不同端口 | 不允許 |
http://http://www.domain.com/a.js https://www.domain.com/b.js | 同一域名,不同協議 | 不允許 |
http://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.js | 主域相同,子域不同 | 不允許 |
http://www.domain1.com/a.js http://www.domain2.com/b.js | 不同域名 | 不允許 |
跨域解決方案
1、 通過jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域資源共享(CORS)
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9、 WebSocket協議跨域
這裏不展開了,方案的網上有很多demo.
跨域需要注意不能同時設置兩個跨域