跨域是指 a 页面想获取 b 页面资源,如果 a、b 页面的协议、域名、端口、子域名不同,或是 a 页面为 ip 地址,b 页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源

如何解决跨域请求

因同源策略而导致的跨域请求问题,解决方法有五种,详细请看wiki

  1. document.domain

  2. Cross-Origin Resource Sharing(CORS)

  3. Cross-document messaging

  4. JSONP

  5. WebSockets

CORS 定义了一种浏览器和服务器之间是否允许跨站请求的标准。这种方式相对其它的来说更加灵活简单,也是 W3C 推荐的方法,下面我们介绍利用CORS解决跨域问题

CORS 是如何工作的?

CORS 标准定义了一组新的 HTTP header,这组 header 给浏览器和服务器提供了一种判断跨域请求是否何法的依据。 因此,要实现 CORS,浏览器(client)和服务器(server)都应该遵守该约定。

1.浏览器端需要在请求的时候增加一个 Origin 的 HTTP header,值为当前页面的域(domain)。如:http://bqteam.com 的页面要请求 http://api.bqteam.com 的资源,需带上的 HTTP header 为 Origin: http://bqteam.com

2.服务器端接收请求,返回的时候需要返回一个 Access-Control-Allow-Origin 的 header 表明哪个域是允许的,如果全都允许,可以使用 * 号。(如上例,http://api.bqteam.com 的返回需要带上 Access-Control-Allow-Origin: http://bqteam.com)

利用Nginx反向代理功能跨域

简单配置:

server {
    set $cors "";

    if ($http_origin ~* (.*\.bqteam.com)) {
        set $cors "true";
    }

    location / {
        if ($cors = "true") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';
        }

        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

更详细的配置如下:

#
# Slightly tighter CORS config for nginx
#
# Despite the W3C guidance suggesting that a list of origins can be passed as part of
# Access-Control-Allow-Origin headers, several browsers (well, at least Firefox)
# don't seem to play nicely with this.
#
# To avoid the use of 'Access-Control-Allow-Origin: *', use a simple-ish whitelisting
# method to control access instead.
#
# NB: This relies on the use of the 'Origin' HTTP Header.

location / {

    if ($http_origin ~* (whitelist\.address\.one|whitelist\.address\.two)) {
        set $cors "true";
    }

    # Nginx doesn't support nested If statements. This is where things get slightly nasty.
    # Determine the HTTP request method used

    if ($request_method = 'OPTIONS') {
        set $cors "${cors}options";  
    }
    if ($request_method = 'GET') {
        set $cors "${cors}get";  
    }
    if ($request_method = 'POST') {
        set $cors "${cors}post";
    }

    if ($cors = "true") {
        # Catch all incase there's a request method we're not dealing with properly
        add_header 'Access-Control-Allow-Origin' "$http_origin";
    }

    if ($cors = "trueget") {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

    if ($cors = "trueoptions") {
        add_header 'Access-Control-Allow-Origin' "$http_origin";

        #
        # Om nom nom cookies
        #

        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #

        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        #
        # Tell client that this pre-flight info is valid for 20 days
        #

        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }

    if ($cors = "truepost") {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }
}