Nginx 指定多个域名跨域请求配置
nginx指定多个域名跨域请求配置
什么是跨域
假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误,"跨域"也就以此由来。跨域的出现主要原因还是安全的限制(同源策略,也就是JavaScript或者Cookie只能够访问同域下的内容),因此在日常的项目开发中会不可避免的出现跨域操作。 和打多数跨域的解决方案一样,JSONP是大多数前端同事的选择,但是JSONP只支持GET请求。但是如果项目功能需要改成支持POST请求,那么因为这种情况下传输的数据量较大,GET形式是搞不定的。此时JSONP并不是一个很好的选择。此时就需要使用CORS(跨域资源共享,Cross-Origin Resource Sharing).
一般跨域会出现的问题
一般来说,跨域会出现如下的问题:
实际项目中出现的问题
先前配置中有如下的域名:
browser.in.meizu.com是向客户端或者是H5提供接口访问的后台域名,browser-res.in.meizu.com,v-res.in.meizu.com都是提供给h5端的入口访问域名。 先前在nginx中有如下的配置:
如果设置了这个配置,那么如果前端的入口是browser-res.in.meizu.com,那么它是可以访问到browser.in.meizu.com提供的接口的。 前端同学用了v-res.in.meizu.com这个域名作为h5端访问入口,访问browser.in.meizu.com,由于此时nginx并没有相关的配置,因此出现了如下的问题:
很明显,这个问题并不是说原程序没有设置"add_header Access-Control-Allow-Origin:"。 我们看前面的nginx中的 配置,已经设置了 browser-res.in.meizu.com 可以访问 browser.in.meizu.com。但是现在的一个问题是前端的同 学使用了 "v-res.in.meizu.com" 这个域名作为前端的入口,所以就出现了以上的问题:browser-res.in.meizu.com是 可以访问browser.in.meizu.com。但是v-res.in.meizu.com不可以访问browser.in.meizu.com.但是当时考虑问题只是 认为是简单的跨域问题,没有考虑到在nginx中的配置,所以就简单的使用了过滤器来进行解决.
/**
* 跨域访问时允许对服务端提交请求过滤器
* @author liguo
* @date 2017-12-31
*
*/
public class CrossDomainFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
//跨域访问转换
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin","*");
chain.doFilter(request, response);
}
/*
* (non-Javadoc)
* @see javax.servlet.Filter#destroy()
*/
@Override
public void destroy() {
}
}
然后在web.xml中配置这个过滤器。 尝试使用过滤器来解决这个问题,在本地联调时没有出现问题。后来部署到测试环境后,出现了以下的问题:
这是因为在本地没有跑nginx,但是部署到测试环境以后,跑了nginx,而nginx中已经有了相关的配置,因此出现了以上的问题。
如何解决这个问题
方法一
先前nginx中有以下的配置:
将add_header Access-Control-Allow-Origin:http://browser-res.in.meizu.com修改为add_header Access-Control-Allow-Origin *,也就是修改为如下的内容:
这个配置的意思是说,任何的域名都可以访问browser.in.meizu.com,但是这个配置不安全
方法二
通过设置变量值解决指定多个域名白名单跨域请求配置(建议使用),也就是将nginx中的配置改为如下的形式
也就是设置一个变量 $cors_origin 来存储需要跨域的白名单,通过正则判断,若是白名单列表,则设置 $cors_origin 值为对应的域名,则做到了多域名跨域白名单功能。
综述
当跨域问题出现时,一般情况下在nginx中通过配置来解决,如果是多个域,那么可以通过设置变量值解决指定多个域名白名单跨域请求配置(建议使用).
更多Linux服务器开发底层原理知识点:Nginx,ZeroMQ,MySQL,Redis,MongoDB,ZK,流媒体,P2P,线程池,Docker,TCP/IP,协程,DPDK,Linux内核内容。+qun720209036获取
Nginx 指定多个域名跨域请求配置相关推荐
- django允许跨域请求配置
2019独角兽企业重金招聘Python工程师标准>>> django允许跨域请求配置 下载corsheader pip install django-cors-headers 修改s ...
- 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
- 简单配置nginx反向代理,实现跨域请求
简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...
- yii2 跨域请求配置_如何在SpringBoot应用中实现跨域访问资源和消息通信?
允许跨域访问 CORS ( Cross Origin Resource Sharing,跨域资源共享)机制允许Web应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行.浏览器支持在API容器中 ...
- Vue.js跨域请求配置、Node.js设置允许跨域
Vue跨域配置 在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码: // 跨域处理proxyTable: {'/api': { // 匹配所有以 '/api' ...
- java服务允许跨域请求配置
web.xml配置信息: <filter><filter-name>CrossFilter</filter-name><filter-class>com ...
- Node.JS跨域请求配置方案
今天在用node开发的过程中,再次遇到同源策略的问题: 在客户端调用服务端获取数据时,Chrome 浏览器中报错如下: Access to XMLHttpRequest at 'http://loca ...
- yii2 跨域请求配置_手机号归属地查询 API 接口调用请求
手机号归属地查询 API 接口在网上已经很多且大都封装成了 API 供别人调用.支持前台跨域请求,以GET方式提交即可.手机号归属地查询 API 接口可以查询手机的归属地详细信息,你可以选择调用本站的 ...
- Axios跨域请求配置
React中用到的网络代理请求是axios,它在使用的过程中,会存在一些问题,今天就分享我遇到过的一些问题 1.跨域请求后台配置: 在SpringBoot项目中的,需要实现WebMvcConfigur ...
最新文章
- Charm Bracelet(0-1)
- python 多行字符串拼接_零基础学python的第71天
- P8实战(二):分布式锁前置技能 etcd 集群搭建
- sql cast()函数
- POJ NOI0105-41 数字统计
- 99个wordpress经典插件
- iOS开发UI篇—无限轮播(循环展示)
- 单板计算机中VPX,VME,cPCI,AdvanceMC,PMC
- Vue之跨域调用网易云音乐API及QQ音乐API
- 【咕嘎批量图片查找助手】如何批量根据图片文件名批量查找图片库,移动或复制到指定文件夹保存
- [hdu3873] Invade the Mars
- 【第二章】Google Guava 之 Splitter 学习
- Application loader:ERROR ITMS-90168: The binary you uploaded was invalid.
- C#.NET发EMAIL的几种方法 MailMessage/SmtpClient/CDO.Message
- 如何在Google Chrome中手动设置位置信息
- Ls-Dyna对预应力钢筋混凝土结构的抗爆模拟
- 论文那些事—ZOO: Zeroth Order Optimization Based Black-box Attacks
- 服装行业进销存软件哪个好?
- 计算机联锁控制系统技术是,铁路信号计算机联锁控制系统容错技术探析
- 5G专网成行业融合“敲门砖”
热门文章
- layui---form表单模块
- TX9116同步升压ic
- 威纶触摸屏485直接控制监控台达vfd-m变频器方式
- 企业机器学习后来居上,吃螃蟹者引领前行?
- 【附源码】Java计算机毕业设计卡通动漫商城系统(程序+LW+部署)
- java毕业设计钢材商贸公司网络购销管理系统Mybatis+系统+数据库+调试部署
- 精诚EAS-MES生产制造执行之机械加工业MES解决方案
- 台式计算机和便携式计算机是替代品吗,一种便携式计算机的制作方法
- ubuntu CentOS RedHat 离线安装docker
- 域名邮箱|Yii2.0使用QQ域名邮箱发送邮件