Nginx CORS 跨域解决方案配置

关于CORS可以阅读这篇文章：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

 

相关的请求头：

Origin: <origin> 表明发送请求或者预请求的域（不仅仅是跨域请求,普通请求也会带有ORIGIN头信息）

Access-Control-Request-Method: <method> 

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

Access-Control-Request-Headers: <field-name>[, <field-name>]* 在发出预检请求时带有这个头信息,告诉服务器在实际请求时会携带的自定义头信息.如有多个,可以用逗号分开

 以上请求头是由浏览器自动设置的，不需要修改客户端代码

 

相关响应头：

Access-Control-Allow-Origin: <origin> | * 允许的请求域（只能配置一个，或使用 * ，意思要么只允许一个域，要么全部。使用 nginx 配置判断可以匹配多个。）

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header 设置浏览器允许访问的服务器的头信息的白名单

Access-Control-Max-Age: <delta-seconds> 这个头告诉我们这次预请求的结果的有效期是多久

Access-Control-Allow-Credentials: true | false 告知客户端,当请求的credientials属性是true的时候,响应是否可以被得到（？？？貌似要携带cookie信息必须设为true）

Access-Control-Allow-Methods: <method>[, <method>]* 指明资源可以被请求的方式有哪些(一个或者多个)

Access-Control-Allow-Headers: <field-name>[, <field-name>]* 用来指明在实际的请求中,可以使用哪些自定义HTTP请求头

以上头信息需要配置服务器，根据请求头中的信息判断是否允许跨域，然后返回相应的请求头

 

nginx 配置

STEP 1 : 创建 cors.conf.part 文件，或者直接写到 server/location 下面

# 默认允许的域，比如这里配置为 http://mydomain.com ,那么从 baidu.com localhost 或
# 者 192.168.2.210 过来的都是不允许的
set $cors_header_origin 'http://mydomain.com';

# 因为 'Access-Control-Allow-Origin' 只能指定一个域或者 *，所以将允许的请求域设置到响应头中
# 使用正则匹配请求头中携带的 Origin 信息，判断是否允许访问。这里会允许 http://static.mydomain.com 
# http://downloads.mydomian.com http://www.mydomain.com 等域访问，相当于通配符 *.mydomain.com
if ($http_origin ~* "http[s]?://.*?\.mydomain\.com") {
    # 如果是来自允许跨域的域，则更新变量，待后面添加响应头使用
    set $cors_header_origin $http_origin;
}

# 允许的请求方法
set $cors_header_methods 'GET, POST, PUT, DELETE, OPTIONS';
# 允许的头信息
set $cors_header_headers 'Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,token';
# 是否相应credientials请求
set $cors_header_credentials 'true';
# 预请求结果有效时间
set $cors_header_max_age 1728000;

# 如果是发出的预请求
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' $cors_header_origin;

    add_header 'Access-Control-Allow-Methods' $cors_header_methods;
    add_header 'Access-Control-Allow-Headers' $cors_header_headers;
    add_header 'Access-Control-Allow-Credentials' $cors_header_credentials;
    add_header 'Access-Control-Max-Age' $cors_header_max_age;

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
}
# 简单请求配置 POST GET HEAD
if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' $cors_header_origin;

    add_header 'Access-Control-Allow-Methods' $cors_header_methods;
    add_header 'Access-Control-Allow-Headers' $cors_header_headers;
}
if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' $cors_header_origin;

    add_header 'Access-Control-Allow-Methods' $cors_header_methods;
    add_header 'Access-Control-Allow-Headers' $cors_header_headers;
}

 

STEP 2 : vhosts.conf 虚拟主机配置文件中引入跨域配置

# tomcat
server {
    server_name www.mydomain.com
    #...... 省略其他配置
	location / {
        # 在 location 内导入刚才我们创建的 cors.conf.part 代码片段
		# cors conf
		include /etc/nginx/conf.d/cors.conf.part;

		proxy_pass http://tomcat;
	}
}

# 下载服务器
server {
    server_name downloads.mydomain.com
    #...... 省略其他配置
	location / {
        # 在 location 内导入刚才我们创建的 cors.conf.part 代码片段
		# cors conf
		include /etc/nginx/conf.d/cors.conf.part;

        root /data/www/downloads;
	}
}

# 其他不允许跨域访问的服务器
server {
    server_name ac.mydomain.com
    #...... 省略其他配置
	location / {
        # 不导入跨域配置
		# include /etc/nginx/conf.d/cors.conf.part;

        root /data/www/ac;
	}
}

 

转载于:https://my.oschina.net/u/260715/blog/796673