react使用proxy解决跨域问题

目前开发的时候都是前后端分离，各自独立进行开发，虽然到最后前端和后端都会部署到同一台服务器上，但是在开发过程中，前端和后端需要进行联调，在这个过程中势必会出现跨域的问题。在写本文章之前我开发过程中遇到的跨域都是直接甩锅给后端，让后端的同学去解决，俗话说大前端小后端（开个玩笑，后端同学不要介意～），我们前端也应该具备解决跨域的能力。接下来就给大家介绍一下我刚才所尝试的前端来解决跨域的问题：

1. 使用react脚手架create-react-app搭建一个基础的react项目目录
2. 目录结构生成后在package.json文件中添加proxy配置，具体配置项如下：
   
   我们具体讲一下各个配置项的含义

   "proxy": {

   "/api": {

   "target": "http://11.158.130.220:8080", //目标服务器

   "changeOrigin": true,//默认false，是否需要改变原始主机头为目标URL

   "pathRewrite": {"^/api" : "/"},// 重写请求，比如我们源访问的是api，那么请求会被解析为/
   secure: false, //如果是https接口 需要配置这个参数为true

   }

   }

3. 配置完成之后一定要重启服务才会proxy配置项才会生效

4. 重启的时候可能会报错（如下截图）这个时候需要删除node_module/react-scripts 然后执行npm i [email protected] --save 再重启服务即可由前端解决跨域问题