create-react-app项目所遇问题总结之跨域

以下为学习react技术栈开发过程中，遇到的问题以及解决方法总结。各位看官请往下瞧！☆〜（ゝ。∂）

如何进行跨域？

方式一

第一步，执行命令

yarn eject

先将react-scripts的配置释放出来。

第二步，配置config/webpackDevServer.config.js

在config/webpackDevServer.config.js中全局搜索proxy，找到

webpackDevServer.config.js

配置成需要代理的接口配置：

在这里插入图片描述

(关于proxy的一些参数的含义和配置的规则，不知道的小伙伴可以到网上查阅一下，这里不做说明。)

配置完成后重启，即可生效。

方式二

第二种方式，不需要执行yarn eject，将react-scripts的配置弹射。
需要安装 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:"你的接口前缀",
                changeOrigin:true,
                pathRewrite:{
                "^/api":""
                }
            })
        )
    }

重启，查看是否生效。

第一种方式是我现在用的，验证过已生效。第二种方式，我没验证过是否生效，但是网上有很多篇文章有说明，故我也写上，待之后亲自验证。