React中跨域问题的完美解决方案

Posted piaobodewu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React中跨域问题的完美解决方案相关的知识,希望对你有一定的参考价值。

针对react版本^16.6.0有多种解决方案

 

方案一:package.json中加上proxy代理配置

在packge.json加入

"proxy": "http://0.0.2.89:7300"

然后你页面中的请求fetch(‘/api/userdata/‘)就会转发到proxy中的地址

也就是真实的请求是http://0.0.2.89:7300/api/userdata/,而且也不会有跨域问题

因为在浏览器看来,你只是发了fetch(‘/api/userdata/‘),没有跨域问题

 

方案二:使用http-proxy-middleware

create-react-app 文档里面有解决方案http-proxy-middleware

请查看文档,具体操作后续将更新

以上是关于React中跨域问题的完美解决方案的主要内容,如果未能解决你的问题,请参考以下文章

多种解决react中跨域问题方案

解决react项目中跨域和axios封装使用

前端前后端分离开发调试过程中跨域问题解决方式

Vue项目中跨域问题的解决

vue+springboot前后端分离工程中跨域问题的解决

如何用CORS来解决JS中跨域的问题