【react基础】12、弹射和代理设置(跨域)

一、弹射

弹射的作用通俗来讲,就是把配置文件(node_modules/react-scripts)弹射到根目录下,并安装依赖。注意这个操作没有回头路,不能撤销。

如何弹射?
1、输入命令:

npm run eject

我每次这个命令的失败率有点高,可能有点背。如果你输入弹射命令后,项目启动失败,这里有个终极解决方案。

2、失败的解决方案
(1)把项目的这个node_modules文件全部删掉,然后输入npm i重新安装所有依赖即可。
(2)若还有问题,则依次输入两条命令:git add .git commit -m "随便写点什么"。然后再重复(1)步骤即可。

3、弹射后文件目录如下:
在这里插入图片描述
其中config和script就是弹射出来的配置文件。

二、设置代理

1、找到配置文件:webpackDevServer.config.js

如果你曾经走过了第一步弹射,这个配置文件在:项目根目录/config/webpackDevServer.config.js

如果你建的项目没有弹射或者其他操作,设置代理的配置文件就藏得比较深,位置在: node_modules/react-scripts/config/webpackDevServer.config.js

2、打开配置文件webpackDevServer.config.js,找到proxy(位置大概在92行左右)写代理内容:

 proxy:{
      "/mz":{ 
          "target":"https://m.maizuo.com" ,
          "changeOrigin":true,
          "pathRewrite":{
            "^/mz":"/"
          }
      }
    },

3、然后就可以跨域访问数据啦

componentDidMount() {
	      fetch("/api/marketing/mobile/index_bc4b176ab15a6a668f51ce4025f2aaad.json")
	      .then(res=>res.json()).then(res=>{
	           console.log(res)
        })
        
        //如果你安装了axios,还可以这样访问
        // axios.get("/api/marketing/mobile/index_bc4b176ab15a6a668f51ce4025f2aaad.json")
	    //  .then(res=>{
	    //       console.log(res)
        //})
}

(本文不定时补充或者更新)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值