nginx 允许跨域请求
当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource
,需要给Nginx服务器配置响应的header参数:
一、 解决方案
只需要在Nginx的配置文件中配置以下参数:
location / { add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Methods 'GET,POST,PUT,PATCH,DELETE,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-Expose-Headers 'Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type';if ($request_method = 'OPTIONS') {return 200;}
}
上面配置代码即可解决问题了,不想深入研究的,看到这里就可以啦=-=
二、 解释
1. Access-Control-Allow-Origin
服务器默认是不被允许跨域的。给Nginx服务器配置`Access-Control-Allow-Origin *`后,表示服务器可以接受所有的请求源(Origin),即接受所有跨域的请求。
2. Access-Control-Allow-Headers 是为了防止出现以下错误:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了"application/json"的类型请求导致的。这里涉及到一个概念:预检请求(preflight request)
,请看下面"预检请求"的介绍。
3. Access-Control-Allow-Methods 是为了防止出现以下错误:
Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
4. 给OPTIONS
添加200
的返回,是为了处理在发送POST请求时Nginx依然拒绝访问,发送"预检请求"时,需要用到方法 OPTIONS,
所以服务器需要允许该方法。
三、 预检请求(preflight request)
其实上面的配置涉及到了一个W3C标准:CORS
,全称是跨域资源共享 (Cross-origin resource sharing),它的提出就是为了解决跨域请求的。
跨域资源共享(CORS)标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,
对那些可能对服务器数据产生副作用的HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求)
,浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
其实Content-Type字段的类型为application/json
的请求就是上面所说的搭配某些 MIME 类型的 POST 请求
,CORS规定,Content-Type不属于以下MIME类型的,都属于预检请求:
application/x-www-form-urlencoded
multipart/form-data
text/plain
所以 application/json的请求 会在正式通信之前,增加一次"预检"请求,这次"预检"请求会带上头部信息 Access-Control-Request-Headers: Content-Type
:
OPTIONS /api/test HTTP/1.1
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
... 省略了一些
服务器回应时,返回的头部信息如果不包含Access-Control-Allow-Headers: Content-Type
则表示不接受非默认的的Content-Type。即出现以下错误:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
nginx 允许跨域请求相关推荐
- Nginx配置跨域请求 Access-Control-Allow-Origin *
Nginx配置跨域请求 Access-Control-Allow-Origin * 当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is p ...
- Nginx 解决跨域问题
什么是跨域 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 nginx解决跨域请求 nginx.config配置 server {listen 80;server_na ...
- 简单配置nginx反向代理,实现跨域请求
简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...
- 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
- Nginx 实现AJAX跨域请求
AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: 1 ...
- nginx 允许跨域_细谈跨域请求的桥梁
何谓跨域?这是浏览器本身特有的同源策略.同源,是指请求的发送方和请求接收方必须在协议.域名和端口上保持高度一致,否则,就会出现请求成功,但无法成功拿到响应结果的现象.但实际开发中,各种复杂业务的交织难 ...
- nginx php 跨域访问权限,nginx + php 实现跨域请求填坑笔记
最近自己构建了一个轻量级的 MVC 框架,现在将该MVC用于生产环境的项目中,目前因为项目中有跨域的请求,所以需要做一些CORS授权,但在实际使用出现了一些问题,目前已解决,故做下记录. 服务器:ce ...
- 使用nginx反向代理发起跨域请求
任务5:http://www.jnshu.com/task/2/45/detail//#1 页面文件放在github:https://github.com/Resalee/css_task/tree/ ...
- 如何在nginx下配置网关,实现跨域请求
1.在nginx下配置网关,实现跨域请求 首先进入虚拟机,打开nginx,开机自启命令 docker update nginx --restart=always 进入nginx下的conf目录下 ...
最新文章
- ios cpu指令架构
- PHP 页面静态化/纯静态化/伪静态化
- 手机网页(WAP)页面上的输入框默认键盘类型
- 计算机图形学跳一跳_“跳一跳”刷不到第一?试试这几个微信小游戏!
- swagger-bootstrap-ui 1.9.3 发布,i18n及自定义文档支持
- 提升对前端的认知,不得不了解Web API的DOM和BOM
- 2018.3.12 Leecode习题 给定一个整数数列,找出其中和为特定值的那两个数。
- python基于给定时间戳生成 未来/过去 前进/倒退 n个小时的时间戳
- 云计算时代的DCI技术
- 嵌入式系统开发必读经典书目
- (二)GNSS定位中的卫星轨道位置计算
- 我上网下载了rar压缩文件,有密码,用arpr工具怎么破解不了,_压缩文件密码
- ipad如何与计算机连接网络连接不上,苹果平板电脑网络连接不可用怎么办
- How to change Intel WiFi Link 5100 AGN MAC addr(更改Intel WiFi Link 5100 AGN MAC地址)
- chrome安装插件的方法
- 计算机术语csr是什么,CSR是什么意思 为何CSR越来越重要
- 如何在OA系统中设定审批流程(一)固定流程
- 销售部门及销售经理的职能
- C语言 日历 判断一年的天数
- 西邮linux兴趣小组2014纳新免试题(四)
热门文章
- 2007年8月28日 月全食
- PTA 7-44 黑洞数
- 留学计算机Ps模板,留学申请PS模板
- 树的前序、中序、后序遍历及深度优先算法DFS、广度优先算法BFS及python实现
- python梦幻西游4小人_梦幻西游:五开简单组合,1无底洞4溅射大唐优势明显,全程挂自动...
- python docx run断开_别再问我python怎么操作Word了!
- linux 魅族,传魅族17全系90Hz刷新率
- 2019【创新奇智】【算法】【面经】
- Cesium-雷达遮罩动态扫描
- 批量直播监测,开播自动下载、分割、上传投稿至bilibili