服务端支持跨域请求

发表于

解决 js 跨域的一种方式是直接在服务端设置允许跨域请求，具体原理及规范可以参考HTTP 访问控制（ CORS ）。问题的关键在于，在创建跨域请求时，请求首部会带上额外信息，这部分不需要手动设置；服务端接收到跨域请求后，设置必要的响应首部信息，完成跨域的请求。

具体设置如下：

  • Apache

    1
    2
    3
    4
    Header set Access-Control-Allow-Origin *
    Header add Access-Control-Allow-Headers "origin, content-type, authorization"
    Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Credentials true

  • Nginx

    1
    2
    3
    4
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Origin,Content-Type';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE,OPTIONS';

如果需要限制能进行跨域请求的域，在 nginx 中可以进行如下设置：

1
2
3
4
5
6
7
8
9
set $set_cross_origin 'http://www.a.com';
if ($http_origin ~* 'https?://(api.a.lar|localhost:4200)') {
    set $set_cross_origin "$http_origin";
}

add_header 'Access-Control-Allow-Origin' '$set_cross_origin';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Origin,Content-Type';
add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE,OPTIONS';

注意
在服务器是 nginx 时，当响应状态码为40x、50x等错误码时，指令 add_header 会失效。
如果 nginx 的版本大于 1.7.5，可以指定第三个参数 always 来修正这问题；如果版本比较低，需要加入其它模块来完成响应首部信息的添加。具体可以参考Module ngx_http_headers_module、Headers More