React解决跨域

React在开发环境中解决跨域问题

其实解决方法和vue的解决方法类似，此项目是使用create-react-app的方式创建的。于是我们去查看官方的解决方案：官方文档地址 其实原理和vue解决跨域方法类似，通过代理的方式来解决。

方法一：修改package.json文件

官方文档：

具体操作：
直接去package.json文件下，加上你的真实请求地址

现在我们去发起请求试试，可能出现一个304的状态码，这个时候只需要重启一下服务就好。

最终效果：

这就拿到数据了

方法二：手动配置解决跨域

查看官方文档：

首先让我下载一个http-proxy-middleware 第三发包，然后再在src文件夹下创建一个src/setupProxy.js文件，并在文件写入如下代码

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',//请求的真实地址
      changeOrigin: true,
    })
  );
};

通过如上方法就可以解决跨域了，注意重启一下服务。