nginx 反向代理，支持跨域，前后分离

前端开发往往涉及到跨域问题，其中解决方案很多：

1.jsonp 需要目标服务器配合一个callback函数。

　　2.window.name+iframe 需要目标服务器响应window.name。

　　3.window.location.hash+iframe 同样需要目标服务器作处理。

　　4.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。

　　5.CORS  需要服务器设置header ：Access-Control-Allow-Origin。

　　6.nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求。

个人觉得6才是正规的解决方案。这里给大家介绍一下如何使用nginx做跨域

由于本人使用MAC，下面的命令都是在MAC环境下的，如需要windows,可同步转化

1.nginx 安装

　　通过homeBrew 安装nginx   

　　命令行：　brew install nginx    安装完毕后，

　　输入nginx -v 出现版本号，则安装成功 （homebrew 如何安装就不叙述了）   　

2.修改nginx的配置文件　

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }

       文件名：nginx.conf    路径/usr/local/etc/nginx/nginx.conf

　　这是最简单的配置

以下代码可以直接复制 全覆盖nginx.conf 文件。

　　　　worker_processes  1;

　　　　events {

    　　　　worker_connections  1024;

　　　　}

  

　　　　http {

    　　　　include       mime.types;

    　　　　default_type  application/octet-stream;

    　　　　sendfile        on;

    　　　　keepalive_timeout  65;

  　　　　  server {

 　　　　       listen       805;    #开辟启动805 端口，原文件是8080端口，由于很多地方使用8080端口，所以此处改为805

  　　　　     

  　　　　      server_name  localhost; # 当前服务的域名

     　　　　   access_log on;

   　　　　     access_log  logs/host.access.log  ;

  　　　　      location / {

  　　　　          #8080端口号是第一步开启的本地服务端口号 

  　　　　          proxy_pass http://localhost:8080;     

　　　　         

   　　　　     }

        

 　　　　       location /uc {                 

　　　　　　　　#uc 是对应的ajax 请求的地址，uc下所有请求都会被重写到http://qa.cx-psi.wmdev2.lsh123.com/去做请求，就可以实现跨域了

 　　　　           rewrite ^/(.*)$ /$1 break;

　　　　            proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;

　　　　        }

    　　　　    location /basic {  

   　　　　         #每有一个新的代理需求，就新增一个location，同上

  　　　　          #反向代理，达到前后端分离开发的目的

 　　　　           rewrite ^/(.*)$ /$1 break;

 　　　　           # include uwsgi_params;

 　　　　           proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;

 　　　　       }

  　　　　  }

 

　　　　　　    include servers/*;

　　　　}

3.  跨域步骤

    1.在完成了对nginx的配置文件修改后，

     首先启动本地服务，无论是gulp,webpack,fis3 ，都会跑一个本地服务起来，访问地址是8080 

    如图：这里的访问地址是IP：8080  也可以用localhost:8080 来访问　

     很明显，可以看出，全部跨域抱红了。

   

这个时候，启nginx 服务， 启动成功后，访问localhost：805端口 ，即可实现跨域

　　　　　　

再次配合图片解释下，这里location /basic   这个basic 是自己手动配置的  指的是 请求的路径，

也就是说，每一个不同的接口路径 都需要配置一次。而proxy_pass 对应的则是目标后端服务器域名

　　　　　　location /basic {  

   　　　　         #每有一个新的代理需求，就新增一个location

  　　　　          #反向代理，达到前后端分离开发的目的

 　　　　           rewrite ^/(.*)$ /$1 break;

 　　　　           # include uwsgi_params;

 　　　　           proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;

 　　　　       }

　　　　

 

 　　　　　　　       是不是很简单哇。 快动手试试吧！

　　Ps：可能需要用到的命令

　　　　###nginx5个命令

　　　　nginx 启动nginx

　　　　ps -ef|grep nginx 查看已启动的nginx服务进程

　　　　Kill -TERM 15800 （立刻停止） 【15800：上面一个命令会看到这个进程号】

　　　　sudo nginx -t 检验配置文件是否有错误（sudo: /usr路径下资源需要管理员权限）

　　　　sudo nginx -s reload reload nginx配置文件

　　　　###nginx 配置文件

　　　　/usr/local/etc/nginx/nginx.conf （配置文件路径）

　　　　

　　

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }
span.s2 { font: 12.0px "Helvetica Neue" }