通过Vue-cli解决前端跨域问题

晒干的老咸鱼

已于 2023-07-27 08:59:21 修改

阅读量337

点赞数

文章标签：前端 vue.js javascript

于 2023-07-27 08:52:34 首次发布

本文链接：https://blog.csdn.net/chali1314/article/details/131951977

版权

文章讲述了如何在Vue项目中通过vue.config.js配置devServer的proxy来解决跨域问题。配置中，/agent开头的请求会被代理到http://10.8.50.250:6666，并使用pathRewrite处理不同路径，以适应多个后端服务器的情况。同时，前端请求需统一添加/agent前缀以使代理生效，此配置仅适用于由vue-cli构建的项目。

摘要由CSDN通过智能技术生成

1、找到vue.config.js

在vue.config.js当中增加如下配置

devServer: {
    port: 3001,
    proxy: {
	 '/agent': {
		target: 'http://10.8.50.250:6666',
		ws: false,            //true,开启ws, 如果是http代理此处可以不用设置
		changeOrigin: true,   // 如果接口跨域，需要进行这个参数配置为true
		//这里注意路径以/开头，范围越大的越靠后
		pathRewrite: {
		  '^/agent/code': '/agent/code',
		  '^/agent/admin/login/system': '/agent/admin/login/system',
		  '^/agent': '/ym/agent',
		}
	  },
	}
 }

'/agent'表示前端以"/agent"开头的请求都会经过处理，通过http://10.8.50.250:6666代理服务器进行转发，这里就保证前端访问后台的服务器跟后台服务器协议，主机和端口都一致，从而解决跨域问题

这里需要注意pathRewrite的配置，这里可以配置多个路径，从而解决，一个前端对应多个后台服务器，多个服务器路径要求不一样的情况，pathRewrite的配置要注意/开头，否则配置无效

在vue.config.js增加完以上配置之后，还需要在前端的request.js（统一配置请求和返回的地方）进行路径配置，所有的接口路径前面加上“/agent”，这样才能保证前端的所有请求都是以"/agent"开头，然后vue.config.js里面的代理配置才能生效，另外还要注意一点，前端工程必须要是通过vue-cli工具创建的才能生效。