vue项目配置代理，处理跨域问题

vue项目配置代理，处理跨域问题

vue2项目代理配置

配置文件为config文件夹下的index.js文件，配置属性为dev属性中的proxyTable属性

moudle.export = {
    
    
	...,
	dev:{
    
    
		...,
		proxyTable: {
    
    
			'/api': {
    
     // '/api'为要代理的路径名，可以随便写
				target: 'http://127.0.0.1:9999', // 代理服务器的地址，就是你要访问的目标地址及端口
				changeOrigin: true, // 是否跨域，当然
				pathRewrite: {
    
    
					'^/apis': '' // 将'/api'开头的/api字符替换成'',即去掉，这里使用的是正则表达式
				}
			}
		}
	}
}

vue3项目代理配置

配置文件为vue.config.js，配置项为devServer属性中的proxy属性

moudle.export = {
    
    
  ...,
  devServer: {
    
    
    ...,
    proxy: {
    
    
      '/api': {
    
     // '/api'为要代理的路径名，可以随便写
        target: "http://127.0.0.1:9999", // 代理服务器的地址
        changeOrigin: true, // 是否允许跨域，肯定是true
        pathRewrite:{
    
     // 是否需要重写路径，是的话就配置
          '^/api':'', // 将/api开头的/api去掉，这里是正则表达式（将/api替换成空）
        }
      }
    }
  }

使用：

配置好上面的配置项之后，所有对/api的请求都会代理到target项的地址下：axios({url: ‘/api/xxx’,method: get/post,…).then(…)访问的地址就为http://127.0.0.1:9999/xxx（注意这里配置了路径重写，/api直接重写为’ '。）

关于其他属性的配置：

参考文档：https://webpack.docschina.org/configuration/dev-server/
通过设置其他的属性能够完成其他的功能，详情自行查阅。