為什么會有跨域的問題出現，如何解決跨域問題
什么是跨域
? 定義: 跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、埠、子域名不同，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源，注意：跨域限制訪問，其實是瀏覽器的限制，理解這一點很重要！！！
? 指的是瀏覽器不能執行其他網站的腳本，它是由瀏覽器的同源策略造成的,是瀏覽器對
javascript 施加的安全限制，防止他人惡意攻擊網站.
? 比如一個黑客,他利用 iframe 把真正的銀行登錄頁面嵌到他的頁面上,當你使用真實的用戶
名和密碼登錄時,如果沒有同源限制,他的頁面就可以通過 JavaScript 讀取到你的表單中輸
入的內容,這樣用戶名和密碼就輕松到手了，
什么是同源策略
? 同源策略 是客戶端腳本（尤其是 Javascript）的重要的安全度量標準，它最早出自 Netscape
Navigator2.0，其目的是防止某個檔案或腳本從多個不同源裝載，所謂同源指的是：協議，
域名，埠相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的視窗和
檔案的屬性
解決方式
1、jsonp
1.1）去創建一個 script 標簽
1.2）script 的 src 屬性設定介面地址
1.3）介面引數,必須要帶一個自定義函式名 要不然后臺無法回傳資料，
1.4）通過定義函式名去接收后臺回傳資料
//去創建一個 script 標簽
var script = document.createElement("script");
//script 的 src 屬性設定介面地址 并帶一個 callback 回呼函式名稱
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到頁面
document.head.appendChild(script);
//通過定義函式名去接收后臺回傳資料
function jsonpCallback(data){
//注意 jsonp 回傳的資料是 json 物件可以直接使用 //Ajax 取得資料是 json 字串需要轉換成 json 物件才可以使用，
}
2、 CORS：跨域資源共享
? 原理：服務器設定 Access-Control-Allow-OriginHTTP 回應頭之后，瀏覽器將會允許跨域請求
? 限制：瀏覽器需要支持 HTML5，可以支持 POST，PUT 等方法兼容 ie9 以上,需要后臺設定
2.1）跨域請求后的回應頭中需要設定
2.2）Access-Control-Allow-Origin 為發起請求的主機地址
2.3）Access-Control-Allow-Credentials，當它被設定為 true 時，允許跨域帶 cookie，但此時 Access-Control- Allow-Origin 不能為通配符*
2.4）Access-Control-Allow-Headers，設定跨域請求允許的請求頭
2.5）Access-Control-Allow-Methods，設定跨域請求允許的請求方式
Access-Control-Allow-Origin: * //允許所有域名訪問，或者
Access-Control-Allow-Origin: HTTP://a.com //只允許所有域名訪問
3、反向代理
3.1)使用 vue-cli 腳手架搭建專案時 proxyTable 解決跨域問題
//打開 config/index.js,在 proxyTable 中添寫如下代碼：
//會攔截到/api的請求代理到目標服務器 http://f.apiplus.cn/xxx
proxyTable: {
'/api':{
target: 'http://f.apiplus.cn', //目標服務器地址
changeOrigin: true, //改變源,是否跨域
pathRewrite: {
'^/api': '/xxx' //路徑重寫,重定向
}
}
}
4.window+iframe
? 需要目標服務器回應window.name
5.nginx反向代理解決跨域問題
? 找到nginx的組態檔“nginx.conf”，修改一下資訊.
server {
listen 80; #監聽80埠，可以改成其他埠
server_name localhost; # 當前服務的域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:81;
proxy_redirect default;
}
location /apis { #添加訪問目錄為/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
#以下配置省略
配置解釋：
1.由配置資訊可知，我們讓nginx監聽localhost的80埠，網站A與網站B的訪問都是經過localhost的80埠進行訪問，
2.我們特殊配置了一個“/apis”目錄的訪問，并且對url執行了重寫，最后使以“/apis”開頭的地址都轉到“http://localhost:82”進行處理，
3.rewrite ^/apis/(.*)$ /$1 break;
代表重寫攔截進來的請求，并且只能對域名后邊以“/apis”開頭的起作用，例如www.a.com/apis/msg?x=1重寫，只對/apis重寫，
rewrite后面的引數是一個簡單的正則 ^/apis/(.*)$ ,$1代表正則中的第一個(),$2代表第二個()的值,以此類推，
break代表匹配一個之后停止匹配，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/292913.html
標籤：其他
上一篇：8080埠被占用時,我們該怎么辦