前端跨域解决方案之proxy跨域代理

1.webpack配置代理

1.1配置信息

module.exports = {
	//...
	devServer: {
		proxy: {
			'/api': {
				target: 'http://www.baidu.com/',
				pathRewrite: {
					'^/api': ''
				},
				changeOrigin: true,
				secure: false,
			}
		}
	}
}

1.2配置中主要的参数说明

1.2.1 ‘/api’

捕获API的标志，如果API中有这个祖父出窜，那么就开始匹配代理，比如API请求/api/users，会被代理到http://www.baidu.com/api/users。

1.2.2 target

代理API地址，就是需要跨域的API地址。地址可以是域名，也可以是IP地址。如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败

1.2.3 pathRewrite

路径重写，也就是说会修改最终请求的API路径。比如访问的API路径/api/users，设置pathRewrite: {'^/api' : ''},后，最终代理访问的路径为：http://www.baidu.com/users，这个参数的目的是给大力命名后，在访问时把命名删除掉。

1.2.4 changeOrigin

这个参数可以让target参数是域名

1.2.5 secure

secure: false，不检查安全问题。设置后，可以接受运行在HTTPS上，可以使用无效证书的后端服务器。

1.2.6 其他参数配置查看http-proxy-middleware文档

其他的配置参数等信息，可以查看这里：https://github.com/chimurai/http-proxy-middleware

2.vue-config配置代理

module.exports = {
	//...
	devServer: {
		proxy: {
			'/api': {
				target: 'http://www.baidu.com/',
				pathRewrite: {
					'^/api': ''
				}
			}
		}
	}
}

配置方式与配置信息与webpack一样，完全可以参考webpack的api

3.参考资料

webpack-dev-server：https://github.com/webpack/webpack-dev-server
http-proxy-middleware：https://github.com/chimurai/http-proxy-middleware
webpack官网 devServer.proxy配置：https://webpack.docschina.org/configuration/dev-server/#devserver-proxy
vue-cli vue-config：https://cli.vuejs.org/zh/config/#vue-config-js