React、Vue在webpack中如何配置代理实现跨域？

解决前后端跨域的方法很多，本篇博客就学习通过在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