Nginx反向代理解决跨域问题

Nginx反向代理解决跨域问题

前言

为什么要做前后端解耦?为什么要做动静分离

我在这篇文章中提到了大多数公司的项目采用了动静分离,<nginx作为代理服务器以及静态资源服务器接收到请求后,静态资源能够在本地或者在专门存放静态资源的一台机器取到,动态资源在tomcat上取到,处理好然后返回给nginx代理服务器在页面上渲染补充。然后通过Nginx服务器统一发送给客户端。>而今天我们学习的跨域则是一个很好的例子。下面我们共同来学习下什么是跨域以及跨域怎么实现?Nginx又是如何配置实现跨域的。

跨域和同源策略

同源策略是我们浏览器的一个安全策略,内容为:   

“两个url只有域名,端口,协议,三者都相同的情况下,才可以互相通过ajax去调用”,但是我们还想实现动静分离跨主机请求,怎么办呢?根据nginx反向代理特点我们知道nginx可以获取其他机器的资源,然后再通过nginx代理返回给客户端(浏览器),而这个操作过程对用户(浏览器)是透明的。既然透明对于浏览器而言,nginx请求的内容既实现了我们跨域的需求又避免了同源策略的限制。这也是为什么nginx是当今主流的web服务器,因为功能真的很强大!

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

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

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

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

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

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

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

Nginx配置跨域

配置模板

可以配置在http字段,也可以配置在单个Location下,根据需求定义

add_header Access-Control-Allow-Origin *;
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,Authorization’;

if ($request_method = ‘OPTIONS’) {
return 204;
}
}

 

参数说明:

  • add_header Access-Control-Allow-Origin * ; nginx默认是不允许跨域的,配置这个参数后,表示服务器可以接受所有的请求源 *  ,即接受所有跨域请求
  • 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,Authorization’;  增加 允许的Header

然后定义匹配规则,这个规则需要和开发沟通,或者开发给你。 然后proxy_pass到对应的服务器就好。下面举个例子摘自51cto 甘兵:http://blog.51cto.com/ganbing/2056654

背景

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

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)

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

备注:这个逻辑是前端代码规定的,而不是Nginx中配置的。访问前端代码后,代码指定了资源的URL后自己去找。

如何解决

进入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;

        }

}

 

 






点赞
  1. 王权富贵 王权富贵说道:
    Google Chrome 71.0.3578.80 Windows 10

    萨满哭晕在厕所 233333333333333333

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Loading...