Nginx 中使用 map 解决多来源跨域问题

MaxSky 等级 302 0 0

map 中需注意,如果存在多个配置文件,不能使用相同的变量名,故这里示例为 $allow_origin_A

# 在 server 上方添加 map
map $http_origin $allow_origin_A {
    default "";
    "~^(https?://localhost(:[\d]+)?)" $1;
    "~^(https?://127.0.0.1(:[\d]+)?)" $1; 
    "~^(https?://192.168.[\d]+.[\d]+(:[\d]+)?)" $1;
    "~^(https?://front.example.com(:[\d]+)?)" $1;
}

server {
    listen       80;
    server_name  api.example.com;

    charset utf-8;
    root    /var/www/wwwroot/api.example.com;

    add_header Access-Control-Allow-Origin $allow_origin_A;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Expose-Headers 'HeaderA, HeaderB'; # 允许响应的头

    location / {
            # 用于强制跳转 HTTPS
            #if ($scheme = http) {
            #    return 301 https://$host$request_uri;
            #}

            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin $allow_origin_A;
                add_header Access-Control-Allow-Credentials true;
                add_header Access-Control-Allow-Headers 'Accept, Authorization, Content-Type'; # 允许请求的头

                add_header Content-Length 0;
                return 204;
            }
        }
    }

    location ~ /\.ht {
        deny  all;
    }
}
收藏
评论区

相关推荐

《前端实战总结》之使用postMessage实现可插拔的跨域聊天机器人
由于笔者之前的项目中接触过聊天机器人的项目,主要实现机器人客服模块,以及支持跨多平台使用的目的,所以特地总结一下,希望有所收获。 你将学到 跨域技术常用方案介绍 pos
当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们只需要请求后端服务器的接口即可实现系统的业务功能开发.这个过程中会涉及到web页面向API服务器的跨域访问(由于受到浏览器的同源策略,但是业界已有很多解决方案,
Cors跨域解决
一、浏览器跨域问题产生 1、跨源资源共享(CORS)中文文档: https://developer.mozilla.org/zhCN/docs/Web/HTTP/Access_control_CORS 2、什么是浏览器跨域问题 指的是浏览器不能执行其他网站的脚本。JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源策略。就好比我
nginx配置系列-日志切割
nginx配置系列日志切割 背景 nginx日志中我们希望日志能够每天或者每小时自动切割,nginx本身没有提供自动切割的机制,但是我们可以通过脚本或者稍加改造让其具备这种能力。下面让我们看看怎么操作吧。 日志切割 常见做法有四种,在我们做之前我们来学习一下nginx日志中常用的内置变量字段都是什么意思 nginx内置变量
python中的map函数
1 map()函数的简介以及语法: map是python内置函数,会根据提供的函数对指定的序列做映射。 map()函数的格式是: map(function,iterable,...) 第一个参数接受一个函数名,后面的参数接受一个或多个可迭代的序列,返回的是一个集合。 把函数依次作用在list中的每一个元素上
go-map源码简单分析(map遍历为什么时随机的)
GO 中map的底层是如何实现的 首先Go 语言采用的是哈希查找表,并且使用链表解决哈希冲突。 GO的内存模型 先看这一张map原理图 (https://imghelloworld.osscnbeijing.aliyuncs.com/49dfa7b81e19fbab143ddc0a7b3b7fa0.png) map 再来看
Vue跨域解决方法
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'AccessControlAllowOrigin' header is present on the requested resource.” 这种跨域错误。 要想本地正常的调试,解决的办法有三个:
Python的map()方法如何使用?
在学习map()方法之前,我们先在交互模式下看下map()的用法说明。 (https://imghelloworld.osscnbeijing.aliyuncs.com/5c398969745b516276e1f7f5c7dcb764.png) 从上面可以得到的信息是: map()返回的是一个map对象(python2.0中返回的是列表
Chrome 中 Set-Cookie SameSite 问题
关于 “Chrome 修改对未设置 SameSite 的 cookie,视作 SameSite:Lax 处理的变更” 的问题,目前看,最妥善的解决方案还是按照规矩办事儿,目前 Chrome 是行动最快的,而 FireFox 和 Edge 也在积极跟进,持支持态度。 影响范围: 如果你的项目中有如下跨域场景: 1. 跨域的 ajax
NGINX的 IF AND 和 OR
if的逻辑用法 什么是逻辑用法呢, 就程序中的and、or关系, 就叫做逻辑了. NGINX支持if的 and 与 or 或者 && 与 || 吗? 答案是No. 当你尝试这样配置, 重载nginx时, nginx会报出错误 location /test/ { default_type text/html;
Nginx 中使用 map 解决多来源跨域问题
map 中需注意,如果存在多个配置文件,不能使用相同的变量名,故这里示例为 $allow_origin_Abash 在 server 上方添加 mapmap $http_origin $allow_origin_A { default ""; "~^(https?://localhost(:\d)?)" $1; "
[concurrent-map]-并发map在go中的使用
关于我 通过学习和分享的过程,将自己工作中的问题和技术总结输出,希望菜鸟和老鸟都能通过自己的文章收获新的知识,并付诸实施。 引言Go语言原生的map类型并不支持并发读写。在Go 1.9之前,go语言标准库中并没有实现并发map。在Go 1.9中,引入了sync.Map。 concurrentmap的优势concurrentm
Git基础命令教程
Git学习 git 之前,我们需要先明白一个概念,版本控制! 版本控制 什么是版本控制版本控制(Revision control)是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史,方便查看更改历史记录,备份以便恢复以前的版本的软件工程技术。 实现跨区域多人协同开发 追踪和记载一个或者多个文件的历史记录 组织和保护你的源代码和文档 统计工作量
实测Tengine开源的Dubbo功能
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star。 背景 Tengine是阿里巴巴基于Nginx开发并开源的Web服务器,它继承了Nginx所有的功能和特性,并在其基础上做了大量的扩展和增强,其中像动态模块加载,四层负载均衡,reuseport支持等能力,都逐渐被Nginx官方吸收引用。Tengine在开
前端容易理解错的跨域原理
前言关于跨域这件事,自从我遇到后,了解一下,这事就过去了。我也一直认为这是个小问题,大家应该都懂。直到我要教妹妹前端时遇上这个问题才发现,这个问题得整个逻辑讲出来其实还挺绕的。知道问题怎么解决很简单,但是要讲清楚问题为什么出现就十分复杂了。那么我突然就好奇了,大家是都懂这个逻辑了嘛。所以我在几个交流群里问了一个问题 为什么很多人都出现本地环境会跨域而线上环境