文档章节

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

倚楼听风雨_
 倚楼听风雨_
发布于 2017/11/15 11:27
字数 723
阅读 2383
收藏 3

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

© 著作权归作者所有

共有 人打赏支持
倚楼听风雨_

倚楼听风雨_

粉丝 52
博文 10
码字总数 8746
作品 1
长沙
私信 提问
nginx反向代理解决跨域问题

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

funnycoderstar
05/08
0
0
超详细 Nginx 极简教程,傻瓜一看也会!

什么是Nginx? Nginx (engine x) 是一款轻量级的Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。 什么是反向代理? 反向代理(Reverse Proxy)方式是指以代理服务器来接受i...

Java填坑之路
11/15
0
0
跨域问题的解决办法

跨域 什么是跨域 跨域是由浏览器的同源策源产生的,是指页面请求的接口地址,必须与页面的url地址处于同域上(即域名、端口、协议相同)。这是为了防止某域名下面的接口,被其他域名下的网页...

BrightLD的博客
2017/12/11
0
0
Nginx 解决浏览器 Ajax 跨域问题

跨域是指 host 为 A 页面中的 Ajax 发起指向 host B 的请求,只要 A 和 B 的协议、域名、端口、子域名其中任何一项不同,则执行的访问都会被认为是跨域的请求,几乎所有的浏览器为了安全等问...

摆码王子
04/16
0
0
详解跨域(最全的解决方案)

image.png 1. 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 同源策略限制了一下行为: Cookie、LocalStorage ...

极客教程
2017/12/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 自定义你的空间

通过对你的空间进行界面的自定义能够让你的空间更加出类拔萃。 如果你具有空间管理员权限,你可以修改你空间的颜色配色,添加你自己的空间标识,选择是否在你空间中显示边栏。或者你可以进入...

honeymose
45分钟前
1
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部