美文网首页
create-react-app的两种跨域解决方式

create-react-app的两种跨域解决方式

作者: 栗子daisy | 来源:发表于2020-06-09 10:04 被阅读0次

我们可以在node-modules/react-scripts/webpack-dev-server.js文件直接配置proxy选项
但是后续如果继续安装其他模块的话 yarn 内部会检测 有没有文件被改动 若有改动恢复原样

两种解决方式

  1. 弹射配置文件
    使用 yarn eject 命令 将react-scripts中一些重要的配置文件弹射出来
    然后对文件config/webpackDevServer.js文件的poxy选项进行配置 更改
    注意:如果弹射失败 (可以将文件夹下面的.git文件夹删除 再进行弹射)
   proxy:{
        "/api":{
            target:"http://47.96.0.211:9000",
            changeOrigin:true,
            pathRewrite:{
            "^/api":""
            }
        }
    },

http-proxy-middleware解决跨域
安装 http-poxy-middleware
命令:yarn add http-poxy-middleware -S
在src/根目录下新建 setupProxy.js文件 进行如下配置:

 const {createProxyMiddleware} = require("http-proxy-middleware");
    module.exports = function(app){
        app.use(
            createProxyMiddleware("/api",{
                target:"http://47.96.0.211:9000",
                changeOrigin:true,
                pathRewrite:{
                "^/api":""
                }
            })
        )
    }

原文链接:https://blog.csdn.net/weixin_44862325/article/details/105595720

相关文章

网友评论

      本文标题:create-react-app的两种跨域解决方式

      本文链接:https://www.haomeiwen.com/subject/kitstktx.html