第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

使用nginx反向代理解決web api調(diào)用時(shí)產(chǎn)生的跨域問(wèn)題

標(biāo)簽:
JavaScript
使用ngnix解决web api调用时产生的跨域问题

在慕课网学习有半年多了,裸辞也有一个月了,在休息了小半个暑假之后,准备在家附近找个工作。第一次面试就进了,也算是转行成功,('')。

需求

上班第一天,老板交给我个任务,简单来说就是调用数据服务商提供的webAPI,来获取数据,展示给业务人员,并存储到数据库中。不过目前公司就我一个做开发,是的,只有我一个“程序员”。初步研究,我觉得如果先不做数据库操作还是挺简单的。通过一个Ajax嵌套另一个Ajax就可以获取数据了,然后再呈现在网页上。

问题

然后就出问题了。图片描述

原因

为什么会出现options?

前台跨域get请求,由于CORS(cross origin resource share)规范的存在,浏览器会首先发送一次options嗅探,同时header带上origin,判断是否有跨域请求权限,服务器响应access control allow origin的值,供浏览器与origin匹配,如果匹配则正式发送get请求

XMLHttpReuest cannot load?

跨域失败

解决方案

why nginx?
想了蛮多解决方案,然而被一一否决

  1. 通过后端调用接口,这样绕过浏览器获取数据,自然也不会有同源限制。然后,本公司就只有我一个人,想要快速实现,显然不现实
  2. jsonp,然而api服务商并未提供
  3. cros,同上,问了也没人回答
  4. iframe,要依赖hack实现,响应数据量大时需要切片、多次设置fragment并轮询,响应频繁时可能失效,所以也被我抛弃
    最后,通过大量的搜索,终于发现一个方法:nginx反向代理

    nginx作为反向代理服务器,就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上,就可以实现跨域访问。对于浏览器来说,访问的就是同源服务器上的一个url。而nginx通过检测url前缀,把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求,并且并不知道这个请求是来自代理服务器的。

实现

在nginx.conf中编辑

  server {
        location / {
            root   html;
            index  index.html index.htm;
            //允许cros跨域访问
            add_header 'Access-Control-Allow-Origin' *;

        }
        //自定义本地路径
        location /apis {
            rewrite  ^.+apis/?(.*)$ /$1 break;
            include  uwsgi_params;
            proxy_pass   http://e.apix.cn;
       }
}

然后我把项目部署在nginx的html根目录下,在ajax调用时设置url从http://e.apix.cn/apixanalysis/mobile/grant/phone/smsCode/verify变为/apis/apixanalysis/mobile/grant/phone/smsCode/verify然后成功解决

总结
  • nginx解决跨域问题,只需要修改一下配置文件即可。超方便简单
  • 多思考,多用搜索引擎
點(diǎn)擊查看更多內(nèi)容
17人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消