如何利用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工作原理和优化总结。
Apr 02 Servers
nginx反向代理配置去除前缀案例教程
Jul 26 Servers
Rhit高效可视化Nginx日志查看工具
Nov 01 Servers
Nginx配置https的实现
Nov 27 Servers
Nginx下SSL证书安装部署步骤介绍
Dec 06 Servers
Nginx反向代理、重定向
Apr 13 Servers
Nginx 安装SSL证书完成HTTPS部署
Apr 28 Servers
利用Apache Common将java对象池化的问题
Jun 16 Servers
云服务器部署 Web 项目的实现步骤
Jun 28 Servers
码云(gitee)通过git自动同步到阿里云服务器
Dec 24 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中获取系统信息的方法
2013/06/25 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
jquery表单验证使用插件formValidator
2012/11/10 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
js给selected添加options的方法
2015/05/06 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Python实现手势识别
2020/10/21 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
晨会主持词
2014/03/17 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书