create-react-app:2种跨域方式

2021-01-10  本文已影响0人  Melody_28a2

方式一:eject弹出配置文件

使用npm run eject将react-scripts中一些重要的配置文件弹出,然后对文件config/webpackDevServer.jspoxy选项进行配置
注意:如果eject失败 ,可以将文件夹下面的.git文件夹删除 再进行eject,或者git commit后再弹出

proxy:{
        "/api":{
            target:"http://XXXX:3000",
            changeOrigin:true,
            pathRewrite:{
            "^/api":""
            }
        }
    }

方式二:http-proxy-middleware

安装 http-poxy-middleware,在src目录下新建 setupProxy.js文件 进行如下配置:

npm i http-proxy-middleware -S
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":""
                }
            })
        ),
        app.use(
            createProxyMiddleware("/api",{
                target:"http://47.96.0.211:9000",
                changeOrigin:true,
                pathRewrite:{
                "^/api":""
                }
            })
        )
    }

如果跨域文件不生效,查看下文件引入路径和名称是否匹配

image.png
上一篇 下一篇

猜你喜欢

热点阅读