基于目前前后端分离的趋势和微前端解决方案,并且很多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';
}
}