跨域问题解决方案

布客收录于 IT-技术实践

2016-05-08 约 862 字预计阅读 2 分钟

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

如何进行跨域请求

为解决同源策略太严格而导致的跨域请求问题，现代浏览器支持多种技术以受控方式放宽同源策略，详细请看 wiki

Data tainting
document.domain property
Cross-Origin Resource Sharing(CORS)
Cross-document messaging
JSONP
WebSockets

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

CORS 是如何工作的？

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

浏览器端需要在请求的时候增加一个 Origin 的 HTTP header，值为当前页面的域(domain)。如：http://bqteam.com 的页面要请求 http://api.bqteam.com 的资源，需带上的 HTTP header 为 Origin: http://bqteam.com
服务器端接收请求，返回的时候需要返回一个 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';
    }
}

目录

跨域问题解决方案

如何进行跨域请求

CORS 是如何工作的？

利用 Nginx 反向代理功能跨域