文档章节

nginx 指定多个域名跨域请求配置

yzChen233
 yzChen233
发布于 2017/11/15 11:27
字数 735
阅读 1.4W
收藏 5

nginx

引子

一般来说,通过js请求非本站网址的地址会提示跨域问题,如下内容: Failed to load http://www.xxxx.com/xxxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.200' is therefore not allowed access.

从客户端的角度来说,大家基本上都是用 jsonp 解决,这里就不多做分析了,有需要的朋友可以自行查询资料,本文重点讲究的从服务端角度解决跨域问题

另,若有朋友想直接看最终建议的解决方案,可直接看文章最后面。

一、不做任何限制的跨域请求配置(不建议)

代码

server {
        ... ...

        add_header Access-Control-Allow-Origin *;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin *;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

上述配置做法,虽然做到了去除跨域请求控制,但是由于对任何请求来源都不做控制,看起来并不安全,所以不建议使用

二、指定一个域名白名单跨域请求配置(具有局限性)

代码

server {
        ... ...

        add_header Access-Control-Allow-Origin http://127.0.0.1;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin http://127.0.0.1;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

上述配置做法,仅局限于 http://127.0.0.1 域名进行跨域访问,假设我使用 http://localhost 请求,尽管都是同一台机器,同一个浏览器,它依旧会提示 No 'Access-Control-Allow-Origin' header is present on the requested resource 。

如果没有特殊要求,使用此种方式已经足够。

三、错误的指定多个域名白名单跨域请求配置(不成功)

代码

server {
        ... ...

        add_header Access-Control-Allow-Origin 'http://127.0.0.1, http://locahost';

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin 'http://127.0.0.1, http://locahost';
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

可能有朋友已经想到了,既然可以配置一个,肯定也可以配置多个,在后面加上逗号继续操作即可,那么最终配置结果就是上述代码,当应用到项目中,会发现报错,提示:The 'Access-Control-Allow-Origin' header contains multiple values 'http://127.0.0.1, http://localhost', but only one is allowed. Origin 'http://127.0.0.1:9000' is therefore not allowed access.

查了资料,基本上意思就是说只能配置一个,不能配置多个。

这个就尴尬了,怎么配置多个呢?请读者继续往下看。

三、通过设置变量值解决指定多个域名白名单跨域请求配置(建议使用)

代码

server {
        ... ...

        set $cors_origin "";
        if ($http_origin ~* "^http://127.0.0.1$") {
                set $cors_origin $http_origin;
        }
        if ($http_origin ~* "^http://localhost$") {
                set $cors_origin $http_origin;
        }
        add_header Access-Control-Allow-Origin $cors_origin;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin $cors_origin;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

设置一个变量 $cors_origin 来存储需要跨域的白名单,通过正则判断,若是白名单列表,则设置 $cors_origin 值为对应的域名,则做到了多域名跨域白名单功能。

My Blog

blog.guijianpan.com

技术交流

© 著作权归作者所有

yzChen233

yzChen233

粉丝 59
博文 13
码字总数 13943
作品 1
长沙
部门经理
私信 提问
加载中

评论(0)

nginx配置CORS实现跨域

场景 最近有个上传图片的需求,为了分流,将接口部署到另一个单独的域名,所以需要解决跨域的问题。 思路 一开始想着在后端代码直接设置cors策略,后来发现请求都是从nginx进入,所以将cors移...

LikeDege
2019/09/29
0
0
nginx反向代理解决跨域问题

nginx的作用 1.代理 2.web静态服务器 代理(proxy) 允许一个网络终端(一般为客户端),通过这个服务于另一个网络终端(一般为服务器)进行非直接的连接;提供代理服务的电脑系统或其他类型的网络终...

funnycoderstar
2018/05/08
0
0
关于withCredentials和CORS[项目笔记]

参考链接 koa2-cors设置允许指定单个域名、多个域名、所有域名跨域 当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域. 跨域资源共享 () 是一种...

阳光。
2019/09/10
0
0
前端开发者必备的 Nginx 知识

nginx在应用程序中的作用 解决跨域 请求过滤 配置gzip 负载均衡 静态资源服务器 nginx是一个高性能的HTTP和反向代理服务器,也是一个通用的TCP/UDP代理服务器,最初由俄罗斯人Igor Sysoev编写...

俊余
2019/06/13
0
0
九种跨域方式实现原理(完整版)

前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 本文完整的源代码请猛戳github博客 一、什么是跨域? 1.什么是同源策略及其限制内容? ...

浪里行舟
2019/01/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Java 8 in Action》Chapter 11:CompletableFuture:组合式异步编程

某个网站的数据来自Facebook、Twitter和Google,这就需要网站与互联网上的多个Web服务通信。可是,你并不希望因为等待某些服务的响应,阻塞应用程序的运行,浪费数十亿宝贵的CPU时钟周期。比...

后端小哥
4分钟前
22
0
「升级指南」Spring Cloud Alibaba v2.2.0 升级问题整理

下面总结一下由 Spring Cloud Alibaba v2.1.0 升级至 v2.2.0 遇到的问题。 主要问题涉及 sentinel 的问题。 破坏性 ,不向下兼容 Spring Cloud Alibaba Sentinel 不再依赖 sentinel-web-ser...

即将秃头的Java程序员
12分钟前
39
0
【word 2019 for Mac实用教程】word文档如何快速完成给章节标题自动编号?

在编辑word文档时,我们经常会遇到给段落编号,手动编号过程繁琐易出错。 那么,如何快速完成给word文档编号呢? 1、打开一个word 2019 for Mac文档,在【开始】选项卡里选择【多级列表】,在...

mac小叮当
13分钟前
21
0
【tty】应用程序调用write写串口调用流程

这几天在跟进串口使能流控后收发异常问题,特简单梳理了下应用程序执行write操作的调用流程,在这简单记录下,平台为全志方案 tty_io.c tty_io.c n_tty.c serial_core.c sunxi_uart.c tty_w...

DerrickOwen
15分钟前
16
0
当真正的市场危机到来时,避险新贵比特币却惨遭遗忘?

年初肆虐新冠病毒疫情在中国的强制隔离处理下已经得到了有效控制,非湖北地区新增病例速度已经得到了有效控制,全国范围内的存量病例也出现了连续近一周的持续下降。 不过上周五以来中国以外...

daxiongdi
20分钟前
43
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部