美文网首页
create-react-app:2种跨域方式

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

作者: Melody_28a2 | 来源:发表于2021-01-10 11:33 被阅读0次

    方式一: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

    相关文章

      网友评论

          本文标题:create-react-app:2种跨域方式

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