什麼是同源策略

同源策略（Sameoriginpolicy）它是瀏覽器最核心也最基本的安全功能。

同源具有以下三個相同點 協議、域名、埠。如果有一項不相同那麼就產生了跨域。

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

• Cookie、LocalStorage 和 IndexDB 無法讀取
• DOM和JS物件無法獲得
• AJAX 請求不能傳送

跨域常用解決方案

1. jsonp 不常用

利用 <script> 標籤沒有跨域限制，網頁可以得到從其他來源動態產生的 JSON 資料。JSONP請求一定需要對方的伺服器做支援才可以。

特點：優點是簡單相容性好，可用於解決主流瀏覽器的跨域資料訪問的問題。缺點是僅支援get方法。

2. CORS（跨域資源共享）常用

後端設定請求頭。

CORS請求設定的響應頭欄位，都以 Access-Control-開頭:

Access-Control-Allow-Origin：必選,它的值要麼是請求時Origin欄位的值，要麼是一個*，表示接受任意域名的請求。 服務端設定,前端直接使用。

Access-Control-Allow-Credentials : 可選，如果為true那麼就是，表示是否允許傳送Cookie。

3.代理跨域

後端：修改nginx伺服器配置來實現

#配置api代理
location ^~/api/ {
  proxy_pass <http://www.api.com/>;
}
 

前端：修改 vue.config.js 的 devServer進行修改

devServer:{
   host:'localhost',
   port:8080,
   proxy:{
    '/api':{
     target:'<http://www.api.com/>',
     changeOrigin:true,
     pathRewrite:{
      '/api':''
      }
     }
    }
}