vue-cli3配置proxy解決前後端域名/端口不一致引起的跨域問題

錯誤代碼

前端

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
this.axios.post('http://localhost:8082/account/signup', this.formValidate)

後端

@RestController
@RequestMapping("/account")
public class AccountController {

    @PostMapping(value = "/signup")
    @ResponseBody
    public JSONObject signup(@RequestBody User user)
    {
        JSONObject object = new JSONObject();
        object.put("type","success");
        object.put("message","註冊成功");
        return object;
    }
}

報錯

xhr.js?13a7:172 OPTIONS http://localhost:8082/account/signup 400

Access to XMLHttpRequest at 'http://localhost:8082/account/signup' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

原因：前端是8080端口，後端是8082端口，引發了跨域問題

解決方法

由於本人用的是vue-cli4.x（高於vue-cli3.0），因此要在項目根目錄下新建一個vue.config.js文件，@vue/cli-service 會自動加載這個文件。關鍵代碼如下：

module.exports = {
  // All options for webpack-dev-server are supported
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    // https://github.com/chimurai/http-proxy-middleware#proxycontext-config
    // axios跨域代理配置表，在這裏可以配置特定的請求代理到對應的API接口
    proxy: {
      // 代理所有的以'/api'開頭的瀏覽器請求
      '/api': {
        // 服務端域名和端口
        target: 'http://localhost:8082',
        // 如果設置成true：請求頭中host會設置成target
        changeOrigin: true,
        // 用'/'替換瀏覽器請求url中的'/api'，例如瀏覽器請求爲http://localhost:8082/api/xxx,
        // 則對應的服務端接口爲http://localhost:8082/xxx
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

並且，前端axios發送請求的url是不寫域名的，所以，前端代碼改爲

this.axios.post('/api/account/signup', this.formValidate)

參考文章：

https://cli.vuejs.org/zh/config/#devserver-proxy

https://github.com/chimurai/http-proxy-middleware#proxycontext-config

https://github.com/chimurai/http-proxy-middleware#context-matching