设置proxy本地代理解决跨域问题

设置proxy本地代理

跨域的原因设置proxy注意 在前端开发中经常性遇到跨域的问题，在第一次遇到的时候会不知所措，甚至就不想改了想直接把锅甩给后台（邪恶）

跨域的原因

对于前端而言，在开发的过程中，静态资源都是存储于本地，通过localhost进行访问，如果想直接通过服务端提供的api来访问就会产生跨域问题。虽然可以叫后台设置一下解除限制，但前端还是需要自己学会怎样解决跨域问题

设置proxy

解决跨域问题的方法中最常用的莫过于配置proxy，主要代码如下：

devServer: { port: port, open: false, overlay: { warnings: false, errors: true }, proxy: { '/api': { // 请求到 /api/name 会被代理到请求 接口前缀/name target: '接口前缀', changeOrigin: true, pathRewrite: { '^/api': '' } }, '/python': { target: 'python接口前缀', changeOrigin: true, pathRewrite: { '^/python': '' } } } }

在设置代理时要注意每一个代理的名字尽量不要相同，如果你想要以api、api1、api2这样的形式去命名多个不同target的代理，可能会发现api1和api2不起作用，这是因为Webpack会优先匹配/api，然后找到/api的代理配置就直接生成最终地址。

---

注意

设置完proxy代理要重启项目，否则还是会出现跨域问题 重启！重启！重启！