axios配置vue項目本地測試環境跨域解決方法

發布時間：2023-07-03 01:38:35 作者：網友整理

問題

后端已經配置好了跨域，前端本地搭建vue-cli測試環境的時候如何解決跨域？(前提進行了基本的axIOS封裝)

分析

這個時候后端API是一個明確的外網環境（使用外網IP或固定域名訪問），需要通過vue-cli腳手架搭建一個代理模式訪問API接口。因為，本地測試環境默認訪問的前端地址是 http://localhost:8080/，除非AP接口也是這地址和接口，不然必然出現跨域問題(跨域是瀏覽器的限制)

以
http://ttapi.research.itcast.cn/App/v1_0/authorizations這個接口為例，
基礎地址是
http://ttapi.research.itcast.cn

通過代理的方式，將以本地請求，變成接口服務器自請求，即，在本地看到的請求會是:

http://localhost:8080/api/app/v1_0/authorizations

解決

創建vue.config.js文件

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/api": {    // 這里的`/api`是自定義的
        target: "http://ttapi.research.itcast.cn/", //這里是真實的接口baseURL
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api/": "", // 這里的`^/api`也是是自定義的
        },
      },
    },
  },
};

注意上面的注釋部分

/api和^/api都是自定義的，可以隨意設置，但是，后面在axios封裝部分需要特別注意
target是后端接口的真實基礎路徑部分，也就是一般axios封裝配置的baseURL

2.axios封裝注意事項

let api_base_url = "";
if (process.env.NODE_ENV === "development") {
    api_base_url = "/api"; //這里填寫測試環境地址，必須和`vue.config.js`那里的第一個路徑一致
} else if (process.env.NODE_ENV === "production") {
    api_base_url = "http://ttapi.research.itcast.cn/"; //生產環境
}
let instance = axios.create({
    timeout: 1000 * 60,
    baseURL: api_base_url,
});