vue_cli3.x 跨域訪問

卡爾西法發表於2019-05-22
Vue跨域

本地使用vue建立專案時，由於需要開啟本地服務，因此會佔用埠，導致傳送ajax請求時需要跨域，以下是跨域請求的解決方案之一，出現同樣問題的朋友可以借鑑參考，謝謝！

  • 問題一

問題描述：當我們傳送跨域請求時，如果不需要保留cookie資訊，出現訪問限制。

解決方案：

//在伺服器端設定請求頭，允許所有域名訪問
header('Access-Control-Allow-Origin:*');
  • 問題二

問題描述：跨域成功後，設定session發現cookie為空。

解決方案：

//在main.js中新增如下程式碼：
    import axios from 'axios'
    axios.defaults.withCredentials = true;  //設定發起請求的‘憑據模式’為‘include’，
//session值可以正常列印出來
  • 問題三

問題描述：session值可以列印，但是跨域請求失敗，被CORS策略阻止訪問。

報錯資訊：

在“http://panhuo.cn/saas/jxc”中對XMLHttpRequest的訪問已被CORS策略阻止:當請求的憑據模式為“include”時，響應中的“Access- control - allow - origin”報頭的值必須不是萬用字元“*”。XMLHttpRequest發起的請求的憑據模式由withCredentials屬性控制。

解決方案：

//在vue.config.js檔案中設定代理
proxy: {  //配置代理
      //跨域設定
      "/api": {
        target: "http://learnku.cn:80/saas/jxc",   //請求源地址
        ws: true,       //是否代理
        changeOrigin: true,  //是否跨域
      }
    }

注意： 當配置代理成功後，需要重啟服務，否則配置檔案不會生效。

至此問題已解決，跨域成功，且可以獲取到cookie值。

本作品採用《CC 協議》，轉載必須註明作者和本文連結
sunshine

相關文章