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

常见的 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允许多个域名跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue打包使用Nginx代理解决跨域问题

    vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了. 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 使用nginx配置反向代理,这样就可以在前端彻底解决跨域问题. vue index.js文件源码 'use strict' // Template version: 1.2.7 // see http://vuejs-templates.github.io/webpack for

  • 利用Nginx的map指令实现页面跳转

    前言 本文主要介绍了利用Nginx中map指令实现页面跳转的方法,有需要的下面来一起学习学习. 实现方法 在 nginx.conf 的 http 域中添加 map 指令规则,这里包含一个 URL 规则映射文件: # 设置301跳转 map $request_uri $new { include /etc/nginx/redirect.map; } map 指令支持引入一个映射文件的方式,这里 redirect.map 文件内容格式如下: ~^/page/mordern-php$ /page/mo

  • 利用nginx解决跨域问题的方法（以flask为例）

    利用nginx解决跨域问题的方法（以flask为例）

    前言 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax请求api,但是我们不得不ajax请求中间层,中间层再请求api. 如图: 为了少敲代码,提高工作效率,我们当然希望将python中间层砍掉,但是如何解决以下三个问题,成为关键: 后端渲染 登录状态判定 跨域转发api 关于1,2我会在另外两篇博客中详细叙述,这篇文章主要解决3,也就是跨域问题.解决

  • 详解Nginx服务器中map模块的配置与使用

    详解Nginx服务器中map模块的配置与使用

    map指令使用ngx_http_map_module模块提供的.默认情况下,nginx有加载这个模块,除非人为的 --without-http_map_module. ngx_http_map_module模块可以创建变量,这些变量的值与另外的变量值相关联.允许分类或者同时映射多个值到多个不同值并储存到一个变量中,map指令用来创建变量,但是仅在变量被接受的时候执行视图映射操作,对于处理没有引用变量的请求时,这个模块并没有性能上的缺失. 一. ngx_http_map_module模块指令说明

  • 利用nginx解决cookie跨域访问的方法

    利用nginx解决cookie跨域访问的方法

    一.写在前面 最近需要把阿里云上的四台服务器的项目迁移到客户提供的新的项目中,原来的四台服务器中用到了一级域名和二级域名.比如aaa.abc.com 和bbb.abc.com 和ccc.abc.com.其中aaa.abc.com登录,通过把cookie中的信息setDomain给.abc.com.其他系统可以共享这个cookie.但是新的四台服务器中并没有申请域名,只有四个ip: 192.168.0.1    单点登录服务器 192.168.0.2 192.168.0.3 192.168.0.4

  • 利用Nginx反向代理解决跨域问题详解

    利用Nginx反向代理解决跨域问题详解

    问题 在之前的分享的跨域资源共享的文章中,有提到要注意跨域时,如果要发送Cookie,Access-Control-Allow-Origin就不能设为*,必须指定明确的.与请求网页一致的域名.在此次项目开发中与他人协作中就遇到此类问题. 解决思路 一般来说,与后台利用CORS跨域资源共享将Access-Control-Allow-Origin设置为访问的域名即可,这个需要后台的配合,且有些浏览器是不支持的. 基于与合作方后台的配合,利用nginx方向代理来满足浏览器的同源策略来实现跨域 实现方法

  • Nginx解决转发地址时跨域的问题

    一.什么是跨域问题 在一个服务器A里放置了json文件,另一个服务器B想向A发送ajax请求,获取此文件,会发生错误. Chrome提示: XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 这就是跨域问题.解决方案有不少,比较好的

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

    常见的 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 Ac

  • 利用Nginx代理如何解决前端跨域问题详析

    前言 Nginx(发音同"engine X")是异步框架的网页服务器,也可以用作反向代理.负载平衡器和HTTP缓存. 本文将讲述如何使用 Nginx 在 Web 前后端分离开发中实现路由的转发. Web 开发通常使用的是前后端分离的开发模式,即前端和后端分别进行开发,前端通过 Ajax 请求后端的接口,将获取数据将数据渲染到页面上.前端开发会使用脚手架搭建前端开发环境,其底层通常会启动一个本地服务器,通常使用的是 nodejs 的 Express 框架.而后端则是提供接口,一般是放在线

  • Nginx解决前端访问资源跨域问题的方法详解

    Nginx解决前端访问资源跨域问题的方法详解

    被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx常用命令: 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止或关闭Nginx:nginx -s quit 配置文件修改重装载命令:nginx -s reload 在停

  • Nginx配置解决NetCore的跨域问题

    使用Nginx配置解决NetCore的跨域 废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名; location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET,POST,PUT,DELETE,PATCH,OPTIONS'; add_header Access-Control-Allow-Header

  • Nginx服务器中处理AJAX跨域请求的配置方法讲解

    Nginx服务器中处理AJAX跨域请求的配置方法讲解

    Nginx 实现AJAX跨域请求 AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Control-Allow-Credentials' 'true

  • 通过Nginx代理转发配置实现跨域的方法（API代理转发）

    通过Nginx代理转发配置实现跨域的方法（API代理转发）

    前言 在WEB开发中,我们经常涉及到跨域的请求,解决跨域问题的方式有很多,比如有window.name.iframe.JSONP.CORS等等,就不详细展开了,涉及到 协议.端口 不一样的跨域请求方式是采用代理,这里我们重点聊聊Nginx代理的方式. 场景 本地启动了一个前后端分离的WEB应用,端口为:3000,可以通过http://127.0.0.1:3000访问前端页面,页面中有些Ajax请求的地址为http://127.0.0.1:3000/api/getList,一般情况下肯定是404或

  • nginx服务器配置解决ajax的跨域问题

    在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是json格式,但ajax返回的error. 在排除json数据格式不正确的原因之后,发现了ajax error函数返回"networkerror failed to execute 'send' on 'xmlhttprequest' failed to load 'http //" XMLHt

  • 如何用Nginx解决前端跨域问题

    前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security.不过这种方式开发PC页面到还好,如果是移动端页面就不行了. 解决办法 使用Nginx转发请求.把跨域的接口写成调本域的接口,然后将这些接口转发到真正的请求地址. 举个栗子 例如我们在开发一个Vue应用. 原先: 调试页面是: http://192.168.1.1

  • 解决nginx/apache静态资源跨域访问问题详解

    1. apache静态资源跨域访问 找到apache配置文件httpd.conf 找到这行 #LoadModule headers_module modules/mod_headers.so 把#注释符去掉 LoadModule headers_module modules/mod_headers.so 目的是开启apache头信息自定义模块 在独立主机配置文件中新增header Header set Access-Control-Allow-Origin * 例如: <VirtualHost

随机推荐