Nginx实现前端跨域AJAX请求

2019-10-16  本文已影响0人  磊哥星期一

现象

在写一个前端页面时(http://127.0.0.1:2001),新接口无法跨域请求(http://examples.com/api),但原来的接口(同一站点同一项目)却正常,后端没时间查原因,只有自己想办法

原因

浏览器有一个最基本的安全策略,叫同源策略,具体是指协议+域名+端口三者相同,有一项不同则是非同源。如果没有同源策略,浏览器很容易受到XSS,CSFR攻击。
而浏览器对于跨域请求,当然是禁止的


无法跨域.png
常见的示例
域名a 域名b 结果
http://a.com/a.js http://a.com/lab/b.js 同源
http://a.com/a.js http://a.com:8080/b.js 不同源
http://a.com/a.js https://a.com/b.js 不同源
http://a.com/a.js https://1.2.3.4/b.js 不同源
http://a.com/a.js http://b.com/b.js 不同源

解决思路

在前端Nginx上配置代理转发,配置http://127.0.0.1:2001/api的访问,转发到http://examples.com/api上即可,部分代码

server {
       listen       2001;
       server_name  127.0.0.1;

       location / {
           root   D:\web;
           index  index.html index.php;
       }
       location /api/ {
           proxy_pass http://examples.com/api/;
       }
    }

其它办法

后端代码修改Access-Control-Allow-Origin的值,实现跨域,不同语言讲法会有差异,但思路一致
Access-Control-Allow-Origin:http://examples.com

上一篇下一篇

猜你喜欢

热点阅读