Nginx配置支持跨域

公司使用swagger作为接口文档容器,文档和接口的域名不同,需要跨域。遇到的最郁闷的坑是,没弄清楚各个属性的含义,导致Access-Control-Allow-Headers漏了两个key没加,一直请求失败。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if ($request_method = 'OPTIONS') {  
add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, 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,Authorization,token';
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, 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,Authorization,token';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, 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,Authorization,token';
}

跨域资源共享头信息

顺便学习下跨域共享的头信息

Access-Control-Allow-Origin

origin参数指定一个允许向该服务器提交请求的URI.对于一个不带有credentials的请求,可以指定为’*’,表示允许来自所有域的请求.

1
Access-Control-Allow-Origin: <origin> | *

Access-Control-Expose-Headers

设置浏览器允许访问的服务器的头信息的白名单

1
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

Access-Control-Max-Age

这个头告诉我们这次预请求的结果的有效期是多久

1
Access-Control-Max-Age: <delta-seconds>

Access-Control-Allow-Credentials

告知客户端,当请求的credientials属性是true的时候,响应是否可以被得到.当它作为预请求的响应的一部分时,它用来告知实际的请求是否使用了credentials.注意,简单的GET请求不会预检,所以如果一个请求是为了得到一个带有credentials的资源,而响应里又没有Access-Control-Allow-Credentials头信息,那么说明这个响应被忽略了.

1
Access-Control-Allow-Credentials: true | false

Access-Control-Allow-Methods

指明资源可以被请求的方式有哪些(一个或者多个). 这个响应头信息在客户端发出预检请求的时候会被返回. 上面有相关的例子.

1
Access-Control-Allow-Methods: <method>[, <method>]*

Access-Control-Allow-Headers

也是在响应预检请求的时候使用.用来指明在实际的请求中,可以使用哪些自定义HTTP请求头.

1
Access-Control-Allow-Headers: X-PINGOTHER

就像我遇到的坑,必须把request header中的key都写到这里,否则是无法成功的。

预请求头

Origin

表明发送请求或者预请求的域

1
Origin: <origin>

Access-Control-Request-Method

在发出预检请求时带有这个头信息,告诉服务器在实际请求时会使用的请求方式

1
Access-Control-Request-Method: <method>

Access-Control-Request-Headers

在发出预检请求时带有这个头信息,告诉服务器在实际请求时会携带的自定义头信息.如有多个,可以用逗号分开.

1
Access-Control-Request-Headers: <field-name>[, <field-name>]*
文章目录
  1. 1. 跨域资源共享头信息
    1. 1.1. Access-Control-Allow-Origin
    2. 1.2. Access-Control-Expose-Headers
    3. 1.3. Access-Control-Max-Age
    4. 1.4. Access-Control-Allow-Credentials
    5. 1.5. Access-Control-Allow-Methods
    6. 1.6. Access-Control-Allow-Headers
  2. 2. 预请求头
    1. 2.1. Origin
    2. 2.2. Access-Control-Request-Method
    3. 2.3. Access-Control-Request-Headers
,