Nginx 反向代理实现跨域

前端日常开发中，经常遇到后端小伙伴提供的接口，无法直接在本地通过脚本直接访问，受到同源策略（浏览器当前页面的 url 和 要访问的接口 url 不一致，即非同源）的限制，可能需要部署到服务器上之后，才是同源请求接口。

那么在此之前，跨域问题可以考虑使用 Nginx 反向代理，Nodejs代理，或者修改浏览器安全策略限制，本文主要介绍使用 Nginx 进行反向代理实现跨域的操作。

参考底部教程，下载安装 Nginx 后编辑 \conf\nginx.conf 配置文件。

一份nginx的参考配置如下：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       3000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;


        location / {
            add_header 'Access-Control-Allow-Origin' '*';
            root   html;
            index  index.html index.htm;
        }
        location /apis {
            rewrite  ^.+apis/?(.*)$ /$1 break;
            include  uwsgi_params;
            proxy_pass http://somewebsite.cn:9218;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

然后将前端源码移入 Nginx 目录下的 html 文件夹中，同时修改 js 源码中相关请求的 url 路径，添加前缀 /apis，比如 /apis/news/list。
最后启动代理服务，访问 localhost:3000/index.html 页面，就能看到正常请求了（可能需要清除一下浏览器缓存~）。
正式上线前，再去除接口添加的前缀即可。

---

关键跨域代理配置的教程：
# 利用nginx 反向代理解决跨域问题

如何启动 Nginx 服务器可参考：
# windows下nginx的安装及使用方法入门

其它参考：
chrome 浏览器的跨域设置