Nginx解决跨域问题

1：跨域问题需求及说明

# 需求：允许主域名和多个子域名进行跨域，尽可能在安全和效率中取得平衡

# 说明：关于同源策略，就是当请求了于自身域名不相同的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！

2：实战

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


# 方案1 * 通配符 全部允许 存在安全问题 (不推荐)
一旦启用本方法，表示任何域名皆可直接跨域请求

    server {
        listen       80;
        server_name  www.kubernetes-devops.cn;
        root         /usr/share/nginx/html;
        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中 只有配置过的允许跨域，配置如下：

    map $http_origin $corsHost {
        default 0;
        "~http://kubernetes-devops.cn" http://kubernetes-devops.cn;
        "~http://file.kubernetes-devops.cn" http://file.kubernetes-devops.cn;
        "~http://docs.kubernetes-devops.cn" http://docs.kubernetes-devops.cn;
    }

    server {
        listen       80;
        server_name  www.kubernetes-devops.cn;
        root         /usr/share/nginx/html;
        location / {
            add_header 'Access-Control-Allow-Origin' $corsHost;
            add_header 'Access-Control-Allow-Headers' '*';
            add_header 'Access-Control-Allow-Methods' '*';
            if ($request_method = 'OPTIONS'){
                return 204;
            }
        }
    }