允许同站跨域Nginx配置方案

基于目前前后端分离的趋势和微前端解决方案，并且很多web服务部署在Nginx服务器上，那么因为前后端分离导致的跨域问题需要迫切得到解决。因为是否允许跨域的因素有协议、域名、端口，只要有一个不一致就算跨域。大部分需求要求一个一级域名下所有子域名都被允许跨域，一个一个枚举配置十分繁琐，且要发版，为了规避这些问题，解决方案如下：

方案一：

map $http_origin $corsHost {
        default *; # 写上自己的默认值
        "~https://csdn.net" https://csdn.net;
}
server {
    location / {
        add_header 'Access-Control-Allow-Origin' $corsHost;
        ...
    }
}

方案二（允许所有.csdn.net(:[0-9]+)?结尾origin携带cookie跨域）推荐使用

map $http_origin $corsHost {
    default "";
    "~\.csdn\.net(:[0-9]+)?$" "$http_origin";
}
 
server {
    location / {
        add_header 'Access-Control-Allow-Origin' $corsHost;
        add_header 'Access-Control-Allow-Credentials' 'true';
        # 下面两个属性可以酌情增减
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' '*';
    }
}

方案三

location / {
    set $cors "";
    if ($http_origin ~* \.csdn\.net(:[0-9]+)?$) {
        set $cors "true";
    }
 
    if ($cors = "true") {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';
    }
}