Nginx 跨域配置支持多域名 (解决配置无效问题)

home 编辑时间 2019/06/18

![](/api/file/getImage?fileId=5d0870ae16199b0683002236)
## 需求
允许主域名和多个子域名进行跨域，尽可能在安全和效率中取得平衡。

## 说明
关于`同源策略`
就是当请求了于自身域名不相同的url时，会返回这段报错
*Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.*

翻译成大白话就是，**你跨域了，而且对方服务器没有允许你跨域**！

百度出来的好多解决方案都是让前端解决，用jsoup之类的。
**其实这是一个典型的服务端的锅！**

解决方案就是在后端response的header中添加3个字段`Access-Control-Allow-Origin` `Access-Control-Allow-Headers` `Access-Control-Allow-Methods`
也可以用java或php等后端语言，写拦截器添加。
一步到位还是推荐用nginx！

## 实现
先说明一下`OPTIONS`，浏览器发现你要跨域之前，会先发送一个OPTIONS，试探一下服务器是否允许跨域，这是导致很多时候明明已经配置了 `add_header 'Access-Control-Allow-Origin' '*'` 还是无效不能跨域的原因。OPTIONS需要单独写一段逻辑允许跨域！

**方案1 * 通配符 全部允许 存在安全问题 (不推荐)**
一旦启用本方法，表示任何域名皆可直接跨域请求。
```nginx
    server {
        ...
        
        location / {
            # 允许 所有头部 所有域 所有方法
        	add_header 'Access-Control-Allow-Origin' '*';
			add_header 'Access-Control-Allow-Headers' '*';
			add_header 'Access-Control-Allow-Methods' '*';
			# OPTIONS 直接返回204
        	if ($request_method = 'OPTIONS') {
            	return 204;
        	}
		}
		
		...
	}
```

**方案2 多域名配置 (推荐)**
配置多个域名在map中 只有配置过的允许跨域
```nginx
    map $http_origin $corsHost {
        default 0;
        "~https://zzzmh.cn" https://zzzmh.cn;
        "~https://chrome.zzzmh.cn" https://chrome.zzzmh.cn;
        "~https://bz.zzzmh.cn" https://bz.zzzmh.cn;
    }
    server {
        ...
        
        location / {
            # 允许 所有头部 所有$corsHost域 所有方法
        	add_header 'Access-Control-Allow-Origin' $corsHost;
			add_header 'Access-Control-Allow-Headers' '*';
			add_header 'Access-Control-Allow-Methods' '*';
			# OPTIONS 直接返回204
        	if ($request_method = 'OPTIONS') {
            	return 204;
        	}
		}
		
		...
	}
```

## 参考
[nginx 允许所有二级域名跨域请求](https://blog.csdn.net/newjueqi/article/details/51385657)
[nginx 指定多个域名跨域请求配置](https://my.oschina.net/yzChen/blog/1573828)
[nginx通过CORS实现跨域](https://www.cnblogs.com/sunmmi/articles/5956554.html)

## END
欢迎访问我的线上项目 
个人博客: https://zzzmh.cn 
极简壁纸: https://bz.zzzmh.cn 
极简插件: https://chrome.zzzmh.cn

送人玫瑰,手留余香