react中做proxy代理解决options的问题

在日常的开发中，为了快速开发，一般都是前后端分离，那么在开发过程中联合调试就成了必不可少的事情了。

在做react项目时，为了方便快捷的开发，一般不会将前端代码编译后再放到服务器上同后台一起调试。常用的方式就是在本地就可以直接调试对接接口，那么使用create-react-app做react快速开发下，就会出现本地起了一个服务，然后通过这个服务区访问服务器上的资源，这样就会产生跨域的问题，时如果不绕过options就会出现后面的请求无法在ajax请求时就会发出两个请求，一个options，一个post/get这种简单的请求。这发送。

我查询了一下网上的介绍，options的出现一般是跨域下产生的，ajax/http会发生两个请求，一个是options，这个请求会去服务端确认一下是否支持跨域操作，如果后台放行，那么你后来的请求就可以正常的发送。

当然这种情况只会出现在跨域操作中，也就是我现在的本地起了一个服务，然后去访问另外一个服务。在实际生产环境中，前后端都是在同一台服务器上的，所以不存在跨域的问题。

那么怎么在本地开发的环境中解决这个问题呢？

使用create-react-app去创建react项目时，我们只需要在package.json中设置代理的参数即可：

"proxy": "http://172.16.101.192:8082",

注意是在package.json的一级节点中进行配置

那么我么在使用npm start 或者yarn start时，本地会起一个http://localhost:3000/的端口，此时再通过代理访问服务器时就可以正常的请求了

更多跨域信息参考：

https://blog.csdn.net/hant1991/article/details/74931158

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

react中做proxy代理解决options的问题相关推荐

vue.config.js配置proxy代理解决跨越；proxy代理报404；
像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题. 本文我们是在v ...
proxy代理解决跨域问题
使用proxy代理方式解决跨域问题首先,了解一下什么是什么跨域,为什么会出现跨域问题? 每个浏览器的URL由协议.域名.端口号:我们可以看到下面表格的一些测试URL: URL地址协议域名端口号 ...
在react中使用css modules解决组件之间样式覆盖问题
今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS 简单介绍一下自己的使用:come on baby 介绍:css in j ...
利用 Nginx 做反向代理解决微信小程序业务域名限制问题
[查看原文] https://fyh.me/2018/07/12/nginx-docker-miniprogram/ 最近做了一个世界杯比赛日程的小程序,只有查看日程的功能,所以很快就发布上线了.后边 ...
proxy跨域不生效_前端开发：深入使用proxy代理解决跨域问题
在前端领域里面,跨域指的是浏览器允许向服务器发送跨域请求,进而克服Ajax只能同源使用的局限性限制.同源策略是一种约定,而且是浏览器中最基本也是最核心的安全功能,若缺少了该策略,浏览器非常容易被*** ...
vue2的proxy代理解决跨域
配置vue.config.js module.exports = {devServer:{proxy:{'/api':{target:'http://123.56.130:8080/', // 需要代 ...
vue中通过第三方代理解决跨域问题
最近在学node,遇到了跨域的问题,来记录下方法首页服务端的框架是通过express-generator 搭建起来的 npm install -g express-generator 具体接下来的 ...
用nginx做udp代理解决ntp被封的问题
NTP端口被运营商封掉了,导致内网的机器都不能正常对时,用tcpdump发现可以往外发包,收不到回应, 自己写了一个测试程序发现服务器端可以收到123端口的udp包,回应收不到,一定是被运营商拦截了. ...
vue项目中如何用代理解决跨域,什么是代理
1.为什么要用代理举一个简单的例子,一般情况下一个公司里面最多的就是ip不同,比方说前端ip是192.168.0.7,后端ip是192.168.0.8,由于ip不同是不能访问后端资源的,不仅仅是ip ...

react中做proxy代理解决options的问题

react中做proxy代理解决options的问题相关推荐

最新文章

热门文章