nginx用反向代理机制解决跨域的问题-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

nginx用反向代理机制解决跨域的问题

简介:

什么是跨域?

使用js获取数据时,涉及到的两个url只要协议、域名、端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题。

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:

http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)

http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

背景

大家看了上面的跨域介绍,相信都大致了解所谓的跨域访问。正好我们公司这两天就有这种需求,公司前端工程师提出需要跨域访问,需求如下:

nginx服务器:172.18.18.75

h5服务器:172.18.18.76

java服务器:172.18.18.77

新增加域名:www.oilup.com  指向 nginx服务器(172.18.18.75)

域名指向的静态目录:/usr/local/nginx/html/web/ 目录放在nginx服务器(172.18.18.75)

[root@localhost web]# pwd

/usr/local/nginx/html/web

[root@localhost web]# ls

css          handlebars  images      init.html  package.json  README.md

gulpfile.js  html        index.html  js         pc.zip        template


当访问域名http://www.oilup.com/  调用  http://172.18.18.76:7080

当访问域名http://www.oilup.com/  调用  http://172.18.18.77:8888

如何解决

进入nginx服务器,配置nginx.conf:

#vim /usr/local/nginx/conf/nginx.conf

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;

    #增加下面3行

    add_header Access-Control-Allow-Origin *;

    add_header Access-Control-Allow-Headers X-Requested-With;

    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    ......

    其它http项的配置省略


    

    #配置server,用location匹配并反向代理proxy_pass

    server {

        listen       80;

        server_name  www.oilup.com;

        

        location / {

           root   html/web;                   

          index  index.html index.htm;

        }

        

        location  /h5/ {                

          rewrite  ^.+h5/?(.*)$ /$1 break; 

          include  uwsgi_params;

          proxy_pass   http://172.18.18.76:7080;

        }

        

        location  /javaes/ {

          rewrite  ^.+javaes/?(.*)$ /$1 break;

          include  uwsgi_params;

          proxy_pass   http://172.18.18.77:8888;

        }

}


重启nginx服务:

/usr/local/nginx/sbin/nginx -s reload


测试访问

image.png


本文转自甘兵 51CTO博客,原文链接:http://blog.51cto.com/ganbing/2056654,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章