react跨域问题

前言

开发中，都会遇到跨域问题，react相较于vue解决跨域问题，更加麻烦一点，但是也只是相对于，下面给大家介绍一下，如何解决react跨域问题。

本次使用中间件 http-proxy-middleware 来解决react跨域问题

1、装包

安装 http-proxy-middleware

npm install http-proxy-middleware

2、使用

在项目src目录中新建一个 setupProxy.js 文件

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api', {
      target: 'http://127.0.0.1:8000',   // 服务器请求地址
      changeOrigin: true,   //是否开启代理
      pathRewrite: {
        '^/api': '',     // 把/api 替换为空
      },
    })
  );
};

http-proxy-middleware 还支持设置多个跨域

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api', {
      target: 'http://127.0.0.1:8000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    })
  );
  app.use(
    createProxyMiddleware('/api', {
      target: 'http://127.0.0.1:3000',
      changeOrigin: true,
      pathRewrite: {
        '^/dev': '',
      },
    })
  );
};