Nginx转发地址解决跨域问题

什么是跨域问题

在一个服务器A里放置了json文件，另一个服务器B想向A发送ajax请求，获取此文件，会发生错误。

Chrome提示：

XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这就是跨域问题。解决方案有不少，比较好的是服务器端配置CORS，但要求服务器端做更改。如果在不需要更改服务器端的情况下解决呢？尤其是需要在本地测试的时候。

配置Nginx

打开nginx目录下的conf文件夹。打开nginx.conf，将其中的http请求修改为：

http {
    include mime.types;
    server {
        listen       80;
        server_name  localhost;
        charset UTF-8;

    location / {
        root html;
        index index.html index.htm;
    }

        # Avoid CORS and reverse proxy settings
        location /api/ { # [2]
            proxy_http_version 1.1;
            proxy_pass http://www.des.com/; # [3]

            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
            add_header Access-Control-Allow-Credentials true;
        }
    }
}

注意粗体字的部分，/api/表示当请求api目录时，转向http://www.des.com/域名。
例如，请求：

http://127.0.0.1/api/ 就会转向 http://www.des.com/

http://127.0.0.1/api/aaa/bbb/ 就会转向 http://www.des.com/aaa/bbb/

这种由服务器转发的请求，可以突破跨域的限制，因此ajax也可以正常工作。

注意：/api/ 不行写成 /api。

http://www.des.com/ 也不能写成 http://www.des.com