nginx反向代理，解决前端跨域问题

ajax跨域问题，是每一个web前端都会经常遇到的问题，当然解决前端跨域的方法也有很多方法，这里我只记录一下如何使用nginx反向代理来实现跨域请求。

那么什么是正向代理，什么又是反向代理呢？如果你还不清楚这些概念，请看这篇文章http://blog.csdn.net/m13666368773/article/details/8060481

---

如果出现跨域就是下面这样，很心塞！

image.png

下面我们就进入正题，看看如何利用nginx反向代理，解决前端跨域问题

1.下载nginx并安装
下载地址：http://nginx.org/en/download.html

我下载的版本是nginx / Windows-1.12.1，安装就不多说了很简单，下面是我安装之后的截图

image.png

2.修改配置文件 conf/nginx.conf
下面是我的配置截图和代码

image.png

server {
        listen       8000;  #默认监听80端口，我这里改成8000
        server_name  localhost; #当前服务域名，一般都是开发者本地电脑

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\WWW\Work; #默认为nginx安装目录下的html文件夹，我这里修改配置路径
            index  index.html index.htm;
        }

        location /apis {  #配置一个/apis 重写到我们真正的api地址http://xxx.xx.xx.xx:xxxx/;

            rewrite  ^.+apis/?(.*)$ /$1 break;
            include  uwsgi_params;
            #真实api服务器地址
            proxy_pass   http://xxx.xx.xx.xx:xxxx/;
       }
   后面的代码就省略了 .......
    }

3.修改js文件的ajax请求代码

修改之前，我们的请求地址是这样的http://120.xx.xx.xx:xxxx/app/api/memberInfo

image.png

使用反向代理后应该改成这样/apis/app/api/memberInfo

image.png

至此我们的反向代理就ok了，地址栏输入localhost:8000/xx/xx.html（端口号改成自己配置的）应该就可以正常获取到我们真正api服务器上的数据了

注意点：
1.先关闭防火墙
2.默认端口号很可能被占用，要配置一个没有被占用端口
3.js文件中的ajax请求地址记得修改
4.每次修改了nginx的配置文件都要重新启动nginx