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

最新推荐文章于 2021-01-31 08:57:48 发布

白柴-

最新推荐文章于 2021-01-31 08:57:48 发布

阅读量489

点赞数

分类专栏： react基础笔记文章标签： react弹射 react正向代理 react跨域

本文链接：https://blog.csdn.net/qq_35443997/article/details/99719487

版权

react基础笔记专栏收录该内容

12 篇文章 2 订阅

订阅专栏

一、弹射

弹射的作用通俗来讲，就是把配置文件（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)
        //})
}

（本文不定时补充或者更新）