爬了两个小时的大坑

前端在github上拉了个vue项目，由于从来没正式学过vue，跨域这个问题一直困扰了很久。

目前暂时能用的解决方案（开发环境）就是：

  • 前端在vue.config.js中加入代理。

    devServer: { port: 8085, open: true, // proxy: 8080, proxy: { '/api': { target: 'http://localhost:8080', ws: true, changeOrigin: true, pathRewrite: { // '/api': '/api' // 这种接口配置出来 http://XX.XX.XX.XX:8083/api/login '/api': '' //这种接口配置出来 http://XX.XX.XX.XX:8083/login } } } },

  • 将封装的axios请求中的baseURL改为'/api'，这样子所有请求就会转发到target/api，pathRewrite可以把api去掉。

  • 后端spring-mvc加入 mvc:cors <mvc:mapping path="/**" allowed-origins="http://127.0.0.1:8085,http://localhost:8085" allowed-methods="POST,GET, OPTIONS,DELETE,PUT" allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With Access-Control-Allow-Origin" allow-credentials="true"/> </mvc:cors>