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