如何利用map实现Nginx允许多个域名跨域


Posted in Servers onMarch 31, 2021

常见的 Nginx 配置允许跨域

server {
  listen    11111;
  server_name localhost;

  location ~ /xxx/xx {
    if ($request_method = 'OPTIONS') {
      return 204;
    }
    add_header Access-Control-Allow-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';
    proxy_pass http://1.2.3.4:5678;
  }
}

指定 Access-Control-Allow-Origin 为 ‘*' ,即为最简单暴力的允许所有访问跨域

允许 Cookie

有些场景下需要使用 Cookie,这时 Nginx 需要加一句 add_header Access-Control-Allow-Credentials 'true';,但此时会发现浏览器报错,说该参数为 true 时,allow origin 不能设置为 ‘*‘,如果手动指定了多个域名,那同样会被浏览器提示错误,说 allow origin 不能设置多个,这些是协议层面的限制

使用 map

在 Nginx 中可以使用 map 得到一个自定义变量,简单的使用可以参考官方文档,在上面提到的场景中,可以对请求中的 origin 做一个过滤处理,把符合要求的请求域名放到一个变量中,在设置 allow origin 时使用该变量就能实现一个动态的、多个的允许跨域域名

一个示例配置如下:

map $http_origin $allow_origin {
  default "";
  "~^(https?://localhost(:[0-9]+)?)" $1;
  "~^(https?://127.0.0.1(:[0-9]+)?)" $1;
  "~^(https?://172.10(.[\d]+){2}(:[0-9]+)?)" $1;
  "~^(https?://192.168(.[\d]+){2}(:[0-9]+)?)" $1;
}

server {
  listen    11111;
  server_name localhost;

  location ~ /xxx/xx {
    if ($request_method = 'OPTIONS') {
      return 204;
    }
    add_header Access-Control-Allow-Origin $allow_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';
    add_header Access-Control-Allow-Credentials 'true';
    proxy_pass http://1.2.3.4:5678;
  }
}

解释说明:

$http_origin 是 Nginx 的内部变量,用于获取请求头中的 origin

$allow_origin 是可以自定义的变量名

总结

到此这篇关于如何利用map实现Nginx允许多个域名跨域的文章就介绍到这了,更多相关map实现Nginx允许多个域名跨域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Servers 相关文章推荐
Nginx+Tomcat实现负载均衡、动静分离的原理解析
Mar 31 Servers
Nginx服务器如何设置url链接
Mar 31 Servers
阿里云Nginx配置https实现域名访问项目(图文教程)
Mar 31 Servers
详解nginx.conf 中 root 目录设置问题
Apr 01 Servers
教你快速开启Apache SkyWalking的自监控
Apr 25 Servers
nginx配置虚拟主机的详细步骤
Jul 21 Servers
nginx刷新页面出现404解决方案(亲测有效)
Mar 18 Servers
使用Nginx的访问日志统计PV与UV
May 06 Servers
详解如何使用Nginx解决跨域问题
May 06 Servers
nginx设置资源请求目录的方式详解
May 30 Servers
使用Apache Camel表达REST服务的方法
Jun 10 Servers
django项目、vue项目部署云服务器的详细过程
Jul 23 Servers
Nginx 过滤静态资源文件的访问日志的实现
Mar 31 #Servers
Nginx的反向代理实例详解
nginx反向代理时如何保持长连接
Mar 31 #Servers
Nginx + consul + upsync 完成动态负载均衡的方法详解
Mar 31 #Servers
浅谈Nginx 中的两种限流方式
Mar 31 #Servers
查看nginx配置文件路径和资源文件路径的方法
Mar 31 #Servers
nginx里的rewrite跳转的实现
Mar 31 #Servers
You might like
PHP安全配置
2006/10/09 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
javascript实现yield的方法
2013/11/06 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
优质服务活动实施方案
2014/05/02 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
买卖合同协议书范本
2014/10/18 职场文书
给老婆的检讨书
2015/01/27 职场文书
党员带头倡议书
2015/04/29 职场文书
民事纠纷协议书
2016/03/23 职场文书
python turtle绘图命令及案例
2021/11/23 Python
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers
LeetCode189轮转数组python示例
2022/08/05 Python