解决前后端跨域的方法很多，本篇博客就学习通过在Vue、React中通过配置代理实现跨域。
1.React
React有两种方式实现代理：
1.1 在package.json中配置“proxy”选项
{
"proxy":"http://localhost:3000"
}
假设前端项目运行在8080端口，即http://localhost:8080，而服务器开在了本地的3000端口，即http://localhost:3000,注意：后面别再接具体路径，否则就只能代理该路径了。
注意：
- 修改了配置文件，需要重新运行项目才能起效。
- 使用了这种方式实现的代理，需要将
请求的路径修改前端项目运行的服务器路径。 - 比如：原本发起请求的url是：http://localhost:3000/getMessage，需要改为：http://localhost:8080/getMessage
而使用了proxy代理后，并不是所有请求都会使用代理，它会先查看8080端口的服务器有没有该资源，如果有，那么就直接使用该资源，而如果没有，才会去使用代理，访问服务器的资源。
比如你请求的url为：http://localhost:8080/index.html,由于8080端口的服务器有index.html，那么就直接使用了该index.html，而不会使用代理。
这种方式只能代理一个服务器，但是大型项目为了性能优化，通常将资源放在多个服务器，这就说明前端项目需要向多个不同服务器发起请求，也就是需要配置多个代理，那么这种方式就没有用处了，因为它只能配置一个代理服务器，但第二种配置方式可以实现。
1.2 在webpack中配置代理
在src目录下手动创建一个setupProxy.js文件，在该文件配置代理，webpack会自动识别该文件并覆盖默认值。
文件内容：
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
proxy('/api', {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
})
)
}
添加了上面文件内容后，重新运行项目。
注意：
- 使用了这种代理还需要修改一下请求的url，即：
http://localhost:8080/api/getMessage，在路径前添加'/api'，只有添加了/api的url才能触发上面配置的代理。
假如我们想要使用多个代理服务器，那就如下配置：
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
proxy('/api', {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
}),
proxy('/api2', {
target: 'http://localhost:4000',
changeOrigin: true,
pathRewrite: {
'^/api2': '',
},
})
)
}
2.Vue
Vue配置代理的方式与React的第二种方式相同，在项目根目录下创建文件：vue.config.js
添加内容：
module.exports={
devServer:{
'/api':{
target:'http://localhost:3000',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
},
'/api2':{
target:'http://localhost:4000',
changeOrigin:true,
pathRewrite:{
'^/api2':''
}
}
}
}