Nginx 跨域配置支持多域名 (解决配置无效问题)【一个很大的坑，终于解决了...】

缺乏、安全感 2021-08-30 01:25 1950阅读 0赞

参考此篇文章 才真正得以解决：[https://leanote.zzzmh.cn/blog/post/5d08554b16199b068300222d][https_leanote.zzzmh.cn_blog_post_5d08554b16199b068300222d]

**关于nginx跨域配置网上的文章特别多,但是最终依然没有效果，最终发现一个问题，除了要参数上面文章的配置以外，一定要注意一个细节**

# [Nginx map 使用详解][Nginx map]： [https://www.cnblogs.com/sheng-247/p/12916610.html][Nginx map] #

### **比如你从 www.aa.com 跨域访问 www.bb.com，必须确保两个条件【相互配置跨域才能成功】** ###

**1、就是 www.aa.com域名中必须配置允许跨域www.bb.com**

**2、就是 www.bb.com域名中也必须配置允许跨域www.aa.com跨域**

### **nginx成功配置的案例【比如aa.com和bb.com域名的相互跨域成功配置】** ###

**第一种简单配置方式【推荐使用】**

# 定义map类型变量,添加所有相互之间可跨域的域名【访问和被访问之间的域名必须相互支持彼此跨域,才能实现跨域成功】
    	map $http_origin $corsHost {
            default 0;
            "~https://aa.com" https://aa.com;
            "~https://bb.com" https://bb.com;
        }
        server {
            ...
    		listen 80;
    		server_name aa.com www.aa.com;
    		index index.html index.htm;
            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;
                }
            }
            ...
        }
    	 server {
            ...
    		listen 80;
    		server_name bb.com www.bb.com;
    		index index.html index.htm;
            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;
                }
            }
            ...
        }

**第二种繁琐配置方式【仅供参考】 **

server {
            ...
    		listen 80;
    		server_name aa.com www.aa.com;
    		index index.html index.htm;
            location / {
                	#使用正则表达式配置多个域名跨域信息【当前域名配置跨域域名且被跨域的域名也必须支持当前域名跨域,必须相互配置支持跨域,才能正常跨域成功！】
    				# 此处是配置aa域名支持bb域名的跨域,如果要跨域成功,必须在bb域名下也配置aa域名,才能跨域成功！
    				set $cors_origin "";
    				if ($http_origin ~* "^http://bb.com$") {
    						set $cors_origin $http_origin;
    				}
    				if ($http_origin ~* "^http://www.bb.com$") {
    						set $cors_origin $http_origin;
    				}
    				# http或https跨域必须配置的三条记录！
    				add_header Access-Control-Allow-Origin $cors_origin;
    				add_header Access-Control-Allow-Methods 'GET, POST, 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';
    				# OPTIONS 方法直接返回204
    				if ( $request_method = 'OPTIONS' ) { 
    						return 204;
    				}
            }
            ...
        }
    	
    	 server {
            ...
    		listen 80;
    		server_name bb.com www.bb.com;
    		index index.html index.htm;
            location / {
                	#使用正则表达式配置多个域名跨域信息【当前域名配置跨域域名且被跨域的域名也必须支持当前域名跨域,必须相互配置支持跨域,才能正常跨域成功！】
    				# 此处是配置bb域名支持aa域名的跨域,如果要跨域成功,必须在aa域名下也配置bb域名,才能跨域成功！
    				set $cors_origin "";
    				if ($http_origin ~* "^http://aa.com$") {
    						set $cors_origin $http_origin;
    				}
    				if ($http_origin ~* "^https://www.aa.com$") {
    						set $cors_origin $http_origin;
    				}
    				# http或https跨域必须配置的三条记录！
    				add_header Access-Control-Allow-Origin $cors_origin;
    				add_header Access-Control-Allow-Methods 'GET, POST, 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';
    				# OPTIONS 方法直接返回204
    				if ( $request_method = 'OPTIONS' ) { 
    						return 204;
    				}
            }
            ...
        }

[https_leanote.zzzmh.cn_blog_post_5d08554b16199b068300222d]: https://leanote.zzzmh.cn/blog/post/5d08554b16199b068300222d
[Nginx map]: https://www.cnblogs.com/sheng-247/p/12916610.html