首页 > 上网技巧 > 电脑小技巧 > vue-cli3配置proxy解决前后端域名/端口不一致引...

vue-cli3配置proxy解决前后端域名/端口不一致引起的跨域问题

时间:2021-08-19 17:38 作者:QQ地带 我要评论

前端
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)
 

标签: vue
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告