11.2 Allowing Cross-Origin Resource Sharing | 跨域资源共享控制

Problem

You’re serving resources from another domain and need to allow

CORS to enable browsers to utilize these resources.

问题

项目资源部署在其它域名，允许跨域的访问请求使用这些资源。

Solution

Alter headers based on the request method to enable CORS:

解决方案

通过对不同请求方法设置对应的 HTTP 消息头实现跨域资源共享：

map $request_method $cors_method {
    OPTIONS 11;    
    GET 1;    
    POST 1;    
    default 0;
}

server {
    ...

    location / {    
        if \($cors\_method ~ '1'\) {    
            add\_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';    
            add\_header 'Access-Control-Allow-Origin' '\*.example.com';    
            add\_header 'Access-Control-Allow-Headers'    
                        'DNT,    
                        Keep-Alive,    
                        User-Agent,    
                        X-Requested-With,    
                        If-Modified-Since,    
                        Cache-Control,    
                        Content-Type';    
        }



        if \($cors\_method = '11'\) {    
            add\_header 'Access-Control-Max-Age' 1728000;    
            add\_header 'Content-Type' 'text/plain; charset=UTF-8';    
            add\_header 'Content-Length' 0;    
            return 204;    
        }    
    }
}

There’s a lot going on in this example, which has been condensed by

using a map to group the GET and POST methods together. The

OPTIONS request method returns information called a preflight

request to the client about this server’s CORS rules. OPTIONS, GET,

and POST methods are allowed under CORS. Setting the AccessControl-Allow-Origin header allows for content being served from

this server to also be used on pages of origins that match this header.

The preflight request can be cached on the client for 1,728,000 sec‐

onds, or 20 days.

这个示例包含很多内容，首先使用 map 指令将 GET 和 POST 请求分入同一组。

The OPTIONS request method returns information called a preflight

request to the client about this server’s CORS rules。在配置中 GET、

POST、OPTIONS 请求都允许跨域访问资源。Access-Controll-Allow-Origin

消息头设置允许请求服务器资源的域名，当客户端域名匹配该设置的域名规

则时，则可以访问服务器资源。The preflight request can be cached on

the client for 1,728,000 seconds, or 20 days.

Discussion

Resources such as JavaScript make cross-origin resource requests

when the resource they’re requesting is of a domain other than its

own origin. When a request is considered cross origin, the browser

is required to obey CORS rules. The browser will not use the

resource if it does not have headers that specifically allow its use. To

allow our resources to be used by other subdomains, we have to set

the CORS headers, which can be done with the add_header direc‐

tive. If the request is a GET, HEAD, or POST with standard content

type, and the request does not have special headers, the browser will

make the request and only check for origin. Other request methods

will cause the browser to make the preflight request to check the

terms of the server to which it will obey for that resource. If you do

not set these headers appropriately, the browser will give an error

when trying to utilize that resource.

结论

当请求的资源不属于当前域名时，就会产生一个跨域的请求，比如 JavaScrpt

请求其它域名的资源变产生跨域请求。当跨域请求产生，浏览器则必须遵守

跨域资源共享(CORS)规则，此时浏览器便不会引用这些跨域的资源，除非，

检测到给定的允许使用非同源资源的 HTTP 消息头。为满足子域名间能够跨域

使用资源，我们需要使用 add_header 指令设置对应的 CORS 消息头。如果，

一个 HTTP 请求是标准的 GET、POST 或 HEAD 请求且并未设置特定的消息头，

浏览器就回对请求和源域名进行检测。Other request methods

will cause the browser to make the preflight request to check the

terms of the server to which it will obey for that resource.如果没有

实现对特定请求消息头的配置，浏览器在获取跨域资源时，则会抛出错误禁止

应用跨域资源。

扩展资料

[[译]nginx map(ngx_http_map_module)](https://www.jianshu.com/p/6dea80baba9b\