React解决跨域

解决跨域

方案一：

react简单解决跨域可以直接在 package.json 中添加 proxy 属性

方案二：

如果你已经进行了 npm run eject ，建议你直接修改 config>webpackDevServer.config.js ：

module.exports = function (proxy, allowedHost) {
  const disableFirewall =
    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';

  // 配置proxy对象解决跨域
  proxy = {
    ...proxy,
    '/api': {
      target: 'http://localhost:3000', // 后台服务地址以及端口号
      changeOrigin: true, //是否跨域
      pathRewrite: { '^/api': '/' },// 代理名称
      secure: false
    },
  }

  return { 
    ......
    }

方案三（推荐）：

安装 http-proxy-middleware ：

npm install http-proxy-middleware
或者
yarn add http-proxy-middleware

这里注意，http-proxy-middleware 模块是有版本区别的，默认安装最新版本，然后在 src 目录下新建 setupProxy.js ：

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
    app.use(
        "/api",
        createProxyMiddleware({
            target: "http://localhost:3000", // 后台服务地址以及端口号
            changeOrigin: true, // 是否开启代理
            pathRewrite: {
                "/api": "", // 代理名称
            },
        })
    );
};

 重新 npm run start 即可解决跨域

方案四：

如果你使用的是 Vite 并非Webpack打包工具，直接使用server的proxy属性即可

//vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
  plugins: [react()],
   
  server: {
    host: "0.0.0.0", //打开显示本地地址
    open: true,// 是否自动启动浏览器
    port: 3000,//端口号
     //代理解决跨域
    proxy: { // 本地开发环境通过代理实现跨域
      // 正则表达式写法
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx:9999', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

注：此跨域解决方法同时也适用于Vue3+Vite的项目中