Nginx反向代理及KOAJS,支持Access-Control-Allow-origin
发布于 8 年前 作者 webkixi 8367 次浏览 来自 分享

妹的,作为不是运维人员的我,真是苦逼了一把,baidu,google找遍,硬是找不到一篇好用的文章,难道没人遇到过吗?

是这样,玩react-native,做fetch数据的时候,远程死活拿不到数据,用jq我当然知道这是跨域的操作,but, native为什么也会跨域,上网搜了一遍,了解到大意是,rn的逻辑/数据部分使用javascript来处理,直到view的时候才会启用native来渲染,是牛逼的想法,这样说来,rn的异步数据处理存在跨域就理所当然了,不知道我理解的对不对。但现实的情况就是如此,本地数据可以,远程数据提示网络出错,debug在promise这里。

说道这里,rn启用fetch方法来获取异步数据,fetch是ES6新标,是要干死jq吗?好吧!怪jq2的ajax不争气,jq3难道会这样没落。。。。,关于jq我是有小情怀的。。。

KOAJS支持

FKPJS的node部分是KOAJS框架,KOAJS官方有一个处理Access-Control-Allow-origin的包kcros传送门,原来是fengmk2大人的作品,膜拜一下fengmk2,安装好KOAJS就可以直接支持CROS了。

Nginx支持

说到底,node是挂载在nginx后端的,nginx本身支持Access-Control-Allow-origin,所以我们来配置nginx。

常规配置如下

location / ......
.....
add_header 'Access-Control-Allow-origin' 'http://www.xxxx.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';          
....

但node部分是nginx反向代理访问,如上设置,并没有卵用,反向代理使用nginx的proxy,起作用的配置如下:

....
proxy_set_header 'Access-Control-Allow-origin' 'http://www.xxxx.com';
proxy_set_header 'Access-Control-Allow-Methods' 'GET, POST';
...

好了,在chrome上jq和fetch,都能正常跑通,再试rn吧

全栈FKPJS

5 回复

给你点赞,666。

楼主是没用过cors相关的包啊,哈哈

rn没有跨域问题

实用。对我有帮助

@trhhh 按最先的理解,RN应该是不存在跨域的问题,但一直找不到原因,只能YY一下了。经实操,问题出在xcode 7的 ios9 版之后,ios8是没有这个问题的,在xcode上info面板下有一个App Transport Security Settings,默认只支持localhost,我这里按照localhost的配置,增加了一个远程的域名,就OK了,又或者删掉下面的所有键值,添加Allow Arbitrary Loads的key,value部分选择Boolean/YES,妥妥的好了,新手真折腾~~~~,哈哈

回到顶部