技術標籤：vuevue.jsjavascript

.一、為什麼會出現跨域問題

出於瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，同源策略會阻止一個域的javascript指令碼和另外一個域的內容進行互動。

二、什麼是跨域

當一個請求url的協議、域名、埠三者之間任意一個與當前頁面url不同即為跨域。
當出現跨域問題時瀏覽器會報如下錯誤：

三.如何解決跨域問題

在vue中使用proxy進行跨域的原理是：將域名傳送給本地的伺服器（啟動vue專案的服務,loclahost:8080），再由本地的伺服器去請求真正的伺服器。

一.vue 配置本地代理解決跨域步驟：

1.在vue專案根目錄下找到vue.config.js檔案（如果沒有該檔案則自己建立），在proxy中設定跨域

module.exports={
    publicPath:'./',
    outputDir: (process.env.NODE_ENV === "production") ? 'smart' : 'test', // 不同的環境打不同包名
    devServer:{
    	   	// hot:true,//是否自動儲存
	        open : true,//是否自動啟動
	        port : 8080,//預設埠號
	        // host : "0.0.0.0",
 

	        https: false, //是否為https 請求 https:{type:Boolean}
	        proxy:{
            '/api':{
            	//target: process.env.VUE_APP_URL, //可以根據不同環境有不同的介面域名
                target:'http://58.250.250.106/',// 固定的域名
                changOrigin:true, //允許跨域 
                pathRewrite:{
                    "^/api"
 
:"" /* 重寫路徑，當我們在瀏覽器中看到請求的地址為：http://localhost:8080/api/core/getData/userInfo 時
                    實際上訪問的地址是：http://121.121.67.254:8185/core/getData/userInfo,因為重寫了 /api
                   */
                }
            }
        }
    }
}

2.在main.js 中引入axios 並將請求根路徑 baseURL設定為/api ,這時候我們的跨域就已經完成了。

import axios from 'axios'
//配置請求的根路徑
axios.defaults.baseURL="/api"; 
//全域性掛載axios
Vue.prototype.$axios = axios;

//注：下面是個人學習記錄用
//條件多的時候也可以進行判斷
//axios.defaults.baseURL= process.env.NODE_ENV === 'production' ?'http://58.250.250.106/':"/api";
// 讓ajax攜帶cookie 
//axios.defaults.withCredentials = true 
//通過axios攔截器 新增token驗證
//axios.interceptors.request.use(config=>{
  //config.headers.Authorization =window.sessionStorage.getItem('token')
  //在最後必須return config
  //return config
//})

3.在頁面中使用axios 傳送請求。

//請求時baseURL 請求頭可以省略不寫
this.$axios.post("/rest/index/login/login", {
          login_info:
"eyJ1c2VybmFtZSI6IldYQkQwMSIsInBhc3N3b3JkIjoiOGRkY2ZmM2E4MGY0MTg5Y2ExYzlkNGQ5MDJjM2M5MDkifQ==",
          sso: 1,
          pe_signals: "32a14c293576410dab5eb7610aefd856",
        })
        .then((res) => {
          console.log(res);
        });

這樣就可以拿到資料了：