vue-cli反向代理

如今的前后端分离的项目，前端地址和后端地址由于浏览器的同源策略存在跨域问题，所以我们很多时候需要通过不同的方法（比如JSONP，CORS，设置代理）解决跨域问题，这里在vue项目中使用了vue-cli反向代理的方式解决

• 在我们开发环境中前端地址访问本地的后端vue-cli地址不存在跨域问题，本地vue-cli后端访问后端服务器也不存在跨域，所以我们可以设置vue-cli反向代理给后端服务器，解决跨域的问题
• 这里设置vue-cli项目中的vue.config.js的配置文件下的devServer节点下的proxy属性解决

module.exports = {
    
    
	devServer: {
    
    
		// 代理配置
		proxy: {
    
    
			// 当我们本地访问带有/api的时候才会触发跨域
			'/api': {
    
    
				target: 'wwww.xxx.com', // 要代理的地址
				changeOrigin: true, // 是否跨域,需要设置为true
				// 路径重写
				pathRewrite: {
    
    
					// 路径重写默认 localhost: xxx/api/abc => www.xxx.com/api/abc
					'^/api': '' // 设置为 localhost: xxx/api/abc => www.xxx.com/abc
				}
			}
		}
	}
}