Nginx跨域问题解析与解决

什么是跨域问题

在同源策略（Same-Origin Policy）的限制下，浏览器禁止通过javascript访问不同源的接口（协议、域名、端口任一个不同都会被认为是不同的源），这就是跨域问题。

Nginx解决跨域问题

Nginx是一种高性能的Web服务器，不仅可以用作Web服务器，还可以用作反向代理、负载均衡、缓存服务器、HTTP服务器等。

Nginx通过配置HTTP头来解决跨域问题。我们可以在Nginx服务器端设置Access-Control-Allow-Origin头，允许指定的域名访问接口。以下是具体步骤：

1. 在nginx.conf配置文件中新增下面的内容：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

1. 这里的Access-Control-Allow-Origin'*'表示允许所有跨域请求访问，如果你只想允许指定的域名访问，可以将此处修改为对应的域名，如：Access-Control-Allow-Origin 'http://www.domain.com'。

2. 如果开启了set_by_lua_directive指令，则需要在该指令中加入以下内容，保证Nginx正常运行

location / {
    # Set by Lua
    Set $cors 'false';
    access_by_lua_block {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            if ($http_origin ~* (http?:\/\/(localhost|domain.com(:\d+)?$))) {
                set $cors 'true';
            }
            if ($cors = 'true') {
                return 204;
            }
            return 403;
        }
    }
}

示例说明

示例1

假设我们拥有一个Nginx服务器，提供了一个接口http://example.com/api/getData，现在希望其他网站也可以通过ajax访问这个接口。

首先，我们在nginx.conf配置文件中新增以下内容：

location /api {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    proxy_pass http://127.0.0.1:8080;
}

这里我们新增了一个location /api的配置，允许外部网站访问，接口的请求地址变为http://example.com/api/getData。

示例2

假设我们还拥有一个前端项目，需要访问其他网站的接口。由于跨域问题的限制，不能直接访问。我们可以通过以下步骤解决跨域问题：

1. 在前端项目的nginx.conf配置文件中新增以下内容：

location /api {
    add_header 'Access-Control-Allow-Origin' 'http://www.domain.com';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    proxy_pass http://remote-domain.com;
}

这里我们新增了一个location /api的配置，指定允许http://www.domain.com访问，接口的请求地址变为 http://example.com/api/getData。

1. 然后，在前端项目中通过ajax访问这个接口就可以了。

$.ajax({
    url: '/api/getData',
    type: 'GET',
    dataType: 'json',
    crossDomain: true,
    xhrFields: {
        withCredentials: true
    },
    success: function (data) {
        // 数据获取成功后的处理
    },
    error: function () {
        // 数据获取失败后的处理
    }
});

这里我们指定了跨域请求类型(crossDomain: true)，设置了带凭证请求(xhrFields: {withCredentials: true})，即可访问位于http://remote-domain.com上的接口。