在日常的开发中,为了快速开发,一般都是前后端分离,那么在开发过程中联合调试就成了必不可少的事情了。
在做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