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

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

如何进行跨域?

方式一

第一步,执行命令
yarn eject 

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

第二步,配置config/webpcreate-react-app项目所遇问题总结之跨域
配置成需要代理的接口配置:
create-react-app项目所遇问题总结之跨域
(关于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":""                 }             })         )     } 

重启,查看是否生效。

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

版权声明:玥玥 发表于 2021-06-13 4:14:27。
转载请注明:create-react-app项目所遇问题总结之跨域 | 女黑客导航