基于目前前后端分离的趋势和微前端解决方案,并且很多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 / {if ($http_origin ~* \.csdn\.net(:[0-9]+)?$) {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';}
}