Vue+SpringBoot前后端分離在開發和生產兩種環境下解決跨域問題

1.前言

我在做項目的過程中，需要去請求其他域名下的api，項目用的是Vue+SpringBoot前后端分離，所以直接在前端用axios發送請求，但是卻報跨域的錯誤，請求失敗。

什么是跨域？

瀏覽器從一個域名的網頁去請求另一個域名的資源時，域名、端口、協議任一不同，都是跨域。

2.問題初步解決

在經過百度查找了多種解決方案后，終於通過設置Vue.config.js文件中的代理解決了這個問題。

2.1 配置proxy代理

假定你要請求的接口是 https://www.baidu.com/test。

首先我們需要先配置vue.config.js文件下的 devServer下的proxy，在proxy屬性下添加以下代碼，target屬性代表你要請求的目標網站，pathRewrite將 /baidutest 指代https://www.baidu.com/。

headers必須要配置，這里強制配置了請求頭的源。

proxy: {
      '/baidutest': {
        target: 'https://www.baidu.com/',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/baidutest': ''
        },
        headers:{
          referer:"https://www.baidu.com/",
          origin: "https://www.baidu.com",
        },
      },
}

 

2.2請求api

配置好代理，我們就可以寫代碼請求了，如下

import axios from 'axios';

export function test(val){
  let url='/baidutest/test?param='+val;
  return  axios({
    url: url,
    method:'GET' ,
  })
}

這里的url就相當於https://www.baidu.com/test?param=val

調用函數，請求成功，問題解決了嗎?

問題解決了但是又沒有完全解決，這是在我開發測試狀態下這樣配置沒問題，可以訪問成功，但是當我把前端打包部署之后又出現了新的問題。。。。。

3.生產部署環境下的新問題

將前端打包部署到nginx環境下，再訪問又訪問不到了，原因：vue.config.js文件下配置的代理不起作用了。解決方案如下：

配置nginx代理，

打開nginx.conf文件，添加如下配置，道理和配置vue.config.js一樣

這樣一來，在生產和開發狀態下的跨域問題就都解決了。

 

第一次寫博客，可能有些地方描述的不太好，敬請指正。