React项目中请求跨域解决方法

今天经理给我了一个React项目地址，让我拉下来并跑起来，拉下来运行起来后，发现所有的请求都失败了，并且都是由于跨域问题导致的。花了点时间，解决了这个问题，在这里记录一下解决方法。

我的情况

使用postman，对这些跨域的接口进行请求，是能够请求到数据的；
但是项目中请求就跨域了；
和后端同事确认后知道：后端服务是部署在线上了的（确认了服务IP地址和端口号是正确的）；
我这是为了将项目正常的跑起来看效果，所以不需要后端来解决跨域问题，前端临时解决就好；

解决方法

使用插件 http-proxy-middleware 来解决这个问题，yarn add http-proxy-middleware（我这里下载的是2.0.6版本，似乎版本不同会导致写法不同，建议使用我这个版本）；
在src目录下，新建一个名为 setupProxy.js 的文件。文件内容为(由于我是内网开发，无法粘贴复制出来，纯手敲，如果敲错了，还望指正)：

假设我项目中跨域报错的接口是(这是请求方式为 get 的接口)：http://192.xxx.x.xx:8000/product/attachment/fetch-all-list

const { createProxyMiddleware } = require("http-proxy-middleware");module.exports = function (app) {app.use(createProxyMiddleware('/praduct', {target: "http://192.xxx.x.xx:8000",  // 就是上面示例接口的 ip地址和端口号changeOrign: true,pathRewrite: { "^/praduct": "" }}))
}

修改你发起请求的那块代码，将请求的接口从上述的：http://192.xxx.x.xx:8000/product/attachment/fetch-all-list，改为：http://你前端项目启动的IP地址以及端口号/product/product/attachment/fetch-all-list（例如：http://192.168.0.60:3000/product/product/attachment/fetch-all-list）
注意：多了一个/product 这是我们上面代码中配置了的，不要漏掉了。
重启你的前端服务，重启后依然跨域，是因为，启动后是通过：http://loaclhost:3000访问的。改为：http://192.168.0.60:3000 就ok了

React项目中请求跨域解决方法相关推荐

imac下修改本地hosts文件解决react项目中的跨域问题
1.跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resource. 解决: 1)在本机命令行输入 ...
vue-element-ui 中请求跨域问题解决方法
找到 vue.config.js 把默认红框中的内容注释掉改为黄框中的内容. 然后更改 .env.development(开发配置文件),把 VUE_APP_BASE_API 中的内容改为 '/a ...
vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
解决ajax请求跨域,解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法方法一 // ajax请求跨域 /* *解决a ...
Django中的跨域解决办法基于后端的跨域解决方案
Django中的跨域解决办法基于后端的跨域解决方案 1 何为跨域在浏览器中,只要发送请求的URL的协议.域名.端口号这三者中的任意一个与当前页面地址的协议.域名.端口号不同,则称之为跨域.当发生这 ...
跨域解决方法——jsonp原理
跨域解决方法--jsonp原理一个域名地址的组成: 当协议.子域名.主域名.端口号任意一个不相同时,都算作不同域,不同域之间相互请求资源,就算做"跨域".由于浏览器同源策略的限制 ...
jquery、javascript实现(get、post两种方式)跨域解决方法
jquery.javascript实现(get.post两种方式)跨域解决方法一.实现get方式跨域请求数据浏览器端 <script> $(document).ready(fun ...
windows7 ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务的解决方法
windows7 ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务的解决方法参考文章: (1)windows7 ORA-12514 TNS 监听程序当前无法识别连接描述符中请求 ...
java连接数据库12514_ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务的解决方法...
早上同事用PL/SQL连接虚拟机中的Oracle数据库,发现又报了"ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务"错误,帮其解决后,发现很多人遇到过这样的问 ...

React项目中请求跨域解决方法

React项目中请求跨域解决方法

我的情况

解决方法

React项目中请求跨域解决方法相关推荐

最新文章

热门文章