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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)

[[email protected] web]# pwd

/usr/local/nginx/html/web

[[email protected] 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


测试访问

技术分享图片


以上是关于nginx用反向代理机制解决跨域的问题的主要内容,如果未能解决你的问题,请参考以下文章

Nginx的反向代理跨域

Nginx 反向代理解决浏览器跨域问题

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

最简单实现跨域的方法:使用nginx反向代理

Nginx转发+反向代理实现跨域接口转发

uniapp之h5反向代理设置踩坑,解决跨域问题