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,
    })
  );
};

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

Logo

前往低代码交流专区

更多推荐