Vue中axios跨域請求解決方法_卡布奇諾y

highlight: default

前言

跨域

指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對 JavaScript 施加的安全限制。

同源

指的是域名，協議，埠均相同，瀏覽器執行 js 指令碼時，會檢查這個指令碼屬於哪個頁面，如果不是同源頁面，就不會被執行。

以下舉例：

```javascript （1）http://www.123.com/index.html 呼叫 http://www.123.com/server.php （非跨域）

（2）http://www.123.com/index.html 呼叫 http://www.456.com/server.php （主域名不同:123/456，跨域）

（3）http://abc.123.com/index.html 呼叫 http://def.123.com/server.php （子域名不同:abc/def，跨域）

（4）http://www.123.com:8080/index.html 呼叫 http://www.123.com:8081/server.php （埠不同:8080/8081，跨域）

（5）http://www.123.com/index.html 呼叫 http://www.123.com/server.php （協議不同:http/https，跨域）

（6）localhost和127.0.0.1雖然都指向本機，但也屬於跨域。 ```

一，前端解決之代理

1. vue-cli 2.x 版本解決方法如下

```js // config/index.js

module.exports = { dev: { // ...

// 跨域配置
proxyTable: {
  '/api': {
    // target: 'http://192.168.2.3:8888', //介面域名
    target: 'http://localhost:8888', //介面域名
    changeOrigin: true, //是否跨域
    pathRewrite: {
      '^/api': '', //將 '/api' 替換為空
    },
  },
},

// ...

}, } ```

（1） Vue 的 config 資料夾下的 index.js 檔案中，在 proxyTable 物件中書寫跨域配置項：將以 /api 開頭的請求地址基礎 URL 替換為 http://localhost:8888

（2）將 axios 的 baseURL 改為 /api

2. vue-cli 3.x 版本解決方法如下

```js // vue.config.js

module.exports = { devServer: { // ...

// 跨域配置
proxy: {
  // 介面是以 /api 開頭的需要代理
  '/api': {
    target: `http://api.mz-moe.cn`, // 代理介面地址。實際請求介面地址會是：http://api.mz-moe.cn/api/xxx/xxx
    changeOrigin: true, // 預設false，是否需要改變原始主機頭為目標URL
    ws: true, // 是否代理websockets
    pathRewrite: {
      '^/api': '', // 重寫請求。實際介面中並沒有 /api，所以需要替換為空 ''
    },
  },
},

// ...

}, } ```

（1）在專案根目錄下建立全域性配置檔案 vue.config.js

（2）在配置檔案中書寫跨域配置（如下圖）

（3）將 axios 的 baseURL 改為 /api

二，後端 springboot 專案解決之配置項

推薦在服務端進行跨域相關配置，在專案中新建允許跨域配置類，如下圖。

Vue中axios跨域請求解決方法