Nginx CORS实现JS跨域

时间  2019-11-25
标签 nginx cors 实现 栏目 Nginx 繁體版
原文   原文链接

1. 什么是跨域

简单地理解就是由于JavaScript同源策略的限制，a.com 域名下的js没法操做b.com或是c.a.com域名下的对象。javascript

同源是指相同的协议、域名、端口。特别注意两点：css

  • 若是是协议和端口形成的跨域问题“前台”是无能为力的，
  • 在跨域问题上，域仅仅是经过“协议+域名+端口”来识别，两个不一样的域名即使指向同一个ip地址，也是跨域的。

2. 跨域解决方案

跨域解决方案有多种，大可能是利用JS Hack：html

3. CORS

CORS: 跨域资源共享(Cross-Origin Resource Sharing)http://www.w3.org/TR/cors/java

当前几乎全部的浏览器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome 3+）均可经过名为跨域资源共享（Cross-Origin Resource Sharing）的协议支持ajax跨域调用。(see: http://caniuse.com/#search=cors)nginx

Chrome, Firefox, Opera and Safari 都使用的是 XMLHttpRequest2 对象， IE使用XDomainRequest。XMLHttpRequest2的Request属性：open()、setRequestHeader()、timeout、withCredentials、upload、send()、send()、abort()。git

XMLHttpRequest2的Response属性：status、statusText、getResponseHeader()、getAllResponseHeaders()、entity、overrideMimeType()、responseType、response、responseText、responseXML。github

启用 CORS 请求

假设您的应用已经在 example.com 上了，而您想要从 www.example2.com 提取数据。通常状况下，若是您尝试进行这种类型的 AJAX 调用，请求将会失败，而浏览器将会出现“源不匹配”的错误。利用 CORS，www.example2.com 服务端只需添加一个HTTP Response头，就能够容许来自 example.com 的请求：ajax

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Credentials: true（可选）

可将 Access-Control-Allow-Origin 添加到某网站下或整个域中的单个资源。要容许任何域向您提交请求，请设置以下：json

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true（可选）

其实，该网站 (html5rocks.com) 已在其全部网页上均启用了 CORS。启用开发人员工具后，您就会在咱们的响应中看到 Access-Control-Allow-Origin 了。

提交跨域请求

若是服务器端已启用了 CORS，那么提交跨域请求就和普通的 XMLHttpRequest 请求没什么区别。例如，如今 example.com 能够向 www.example2.com 提交请求了：

var xhr = new XMLHttpRequest();
// xhr.withCredentials = true; //若是须要Cookie等
xhr.open('GET', 'http://www.example2.com/hello.json');
xhr.onload = function(e) {
  var data = JSON.parse(this.response);
  ...
}
xhr.send();

4. 服务端Nginx配置

要实现CORS跨域，服务端须要这个一个流程:http://www.html5rocks.com/static/images/cors_server_flowchart.png

对于简单请求，如GET，只须要在HTTP Response后添加Access-Control-Allow-Origin。

对于非简单请求，好比POST、PUT、DELETE等，浏览器会分两次应答。第一次preflight（method: OPTIONS），主要验证来源是否合法，并返回容许的Header等。第二次才是真正的HTTP应答。因此服务器必须处理OPTIONS应答。

http://enable-cors.org/server_nginx.html这里是一个nginx启用COSR的参考配置。

流程以下：

  1. 首先查看http头部有无origin字段；
  2. 若是没有，或者不容许，直接当成普通请求处理，结束；
  3. 若是有而且是容许的，那么再看是不是preflight(method=OPTIONS)；
  4. 若是是preflight，就返回Allow-Headers、Allow-Methods等，内容为空；
  5. 若是不是preflight，就返回Allow-Origin、Allow-Credentials等，并返回正常内容。

用伪代码表示：

location /pub/(.+) {
    if ($http_origin ~ <容许的域（正则匹配）>) {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' "true";
        if ($request_method = "OPTIONS") {
            add_header 'Access-Control-Max-Age' 86400;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
            add_header 'Access-Control-Allow-Headers' 'reqid, nid, host, x-real-ip, x-forwarded-ip, event-type, event-id, accept, content-type';
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain, charset=utf-8';
            return 204;
        }
    }
    # 正常nginx配置
    ......
}

可是因为Nginx 的 if 是邪恶的，因此配置就至关地让人不爽（是个人配置不够简洁吗？）。下面nginx-spdy-push里/pub接口启用CORS的配置：

# push publish
# broadcast channel name must start with '_'
# (i.e., normal channel must not start with '_')

# GET /pub/channel_id -> get statistics about a channel
# POST /pub/channel_id -> publish a message to the channel
# DELETE /pub_admin?id=channel_id -> delete the channel

#rewrite_log on;

# server_name test.gw.com.cn
# listen 2443 ssl spdy

location ~ ^/pub/([-_.A-Za-z0-9]+)$ {

    set $cors "local";

    # configure CORS based on https://gist.github.com/alexjs/4165271
    # (See: http://www.w3.org/TR/2013/CR-cors-20130129/#access-control-allow-origin-response-header )

    if ( $http_origin ~* "https://.+\.gw\.com\.cn(?=:[0-9]+)?" ) {
        set $cors "allow";
    }
    if ($request_method = "OPTIONS") {
        set $cors "${cors}options";
    }

    # if CORS request is not a simple method
    if ($cors = "allowoptions") {
        # Tells the browser this origin may make cross-origin requests
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        # in a preflight response, tells browser the subsequent actual request can include user credentials (e.g., cookies)
        add_header 'Access-Control-Allow-Credentials' "true";

        # === Return special preflight info ===

        # Tell browser to cache this pre-flight info for 1 day
        add_header 'Access-Control-Max-Age' 86400;

        # Tell browser we respond to GET,POST,OPTIONS in normal CORS requests.
        # Not officially needed but still included to help non-conforming browsers.
        # OPTIONS should not be needed here, since the field is used
        # to indicate methods allowed for 'actual request' not the preflight request.
        # GET,POST also should not be needed, since the 'simple methods' GET,POST,HEAD are included by default.
        # We should only need this header for non-simple requests methods (e.g., DELETE), or custom request methods (e.g., XMODIFY)
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';

        # Tell browser we accept these headers in the actual request
        add_header 'Access-Control-Allow-Headers' 'reqid, nid, host, x-real-ip, x-forwarded-ip, event-type, event-id, accept, content-type';

        # === response for OPTIONS method ===

        # no body in this response
        add_header 'Content-Length' 0;
        # (should not be necessary, but included for non-conforming browsers)
        add_header 'Content-Type' 'text/plain, charset=utf-8';
        # indicate successful return with no content
        return 204;
    }

    if ($cors = "allow") {
        rewrite /pub/(.*) /pub_cors/$1 last;
    }

    if ($cors = "local") {
        rewrite /pub/(.*) /pub_int/$1 last;
    }
}

location ~ /pub_cors/(.*) {
    internal;
    # Tells the browser this origin may make cross-origin requests
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    # in a preflight response, tells browser the subsequent actual request can include user credentials (e.g., cookies)
    add_header 'Access-Control-Allow-Credentials' "true";

    push_stream_publisher                   admin; # enable delete channel
    set $push_stream_channel_id             $1;

    push_stream_store_messages              on;  # enable /sub/ch.b3
    push_stream_channel_info_on_publish     on;
}

location ~ /pub_int/(.*) {
  # internal;
    push_stream_publisher                   admin; # enable delete channel
    set $push_stream_channel_id             $1;

    push_stream_store_messages              on;  # enable /sub/ch.b3
    push_stream_channel_info_on_publish     on;
}

5. 客户端javascript代码

下面是https://spdy.gw.com.cn/sse.html里的代码

var xhr = new XMLHttpRequest();
//xhr.withCredentials = true;
xhr.open("POST", "https://test.gw.com.cn:2443/pub/ch1", true);
// xhr.setRequestHeader("accept", "application/json");

xhr.onload = function()  {
  $('back').innerHTML = xhr.responseText;
  $('ch1').value = + $('ch1').value + 1;
}
xhr.onerror = function() {
  alert('Woops, there was an error making the request.');
};

xhr.send($('ch1').value);

页面的域是https://spdy.gw.com.cn， XMLHttpRequest的域是https://test.gw.com.cn:2443，不一样的域，而且Post方式。

用Chrome测试，能够发现有一次OPTIONS应答。如过没有OPTIONS应答，多是以前已经应答过，被浏览器缓存了'Access-Control-Max-Age' 86400;，清除缓存，再试验。

6. 相关连接

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程