Nginx配置跨域请求 CORS
当出现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-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
上面配置代码即可解决问题了,不想深入研究的,看到这里就可以啦=-=
二、 解释
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.
发送"预检请求"时,需要用到方法 OPTIONS
,所以服务器需要允许该方法。
三、 预检请求(preflight request)
其实上面的配置涉及到了一个W3C标准:CROS
,全称是跨域资源共享 (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-Request-Headers: Content-Type
则表示不接受非默认的的Content-Type。即出现以下错误:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
转自:http://blog.51cto.com/13523664/2060430
Nginx配置跨域请求 CORS的更多相关文章
- NGINX: 配置跨域请求
说明: 内容全部来自 SegmentFault Developer Nginx 配置跨域请求 跨域请求失败, nginx 报错: 403 No 'Access-Control-Allow-Origin ...
- Nginx配置跨域请求 Access-Control-Allow-Origin *
当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...
- Nginx配置跨域请求“Access-Control-Allow-Origin”
当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...
- Django-缓存机制、跨域请求(CORS)、ContentType组件
Django缓存机制: 在settings中间件里面设置: 三个粒度: 1 全站缓存 用中间件: MIDDLEWARE = [ # 'django.middleware.cache.UpdateCac ...
- eclipse加速/Nginx配置跨域代理
下班时间到啦! --下班都是他们的,而我,还是什么都没有. eclipse加速 去掉包含js文件的包的js验证,否则每次启动都需要进行校验(右击项目->properties) Nginx配置跨域 ...
- Nginx配置跨域支持功能
跨域是前端开发中经常会遇到的问题,前端调用后台服务时,通常会遇到 No 'Access-Control-Allow-Origin' header is present on the requested ...
- .NET 反向代理 YARP 跨域请求 CORS
使用过 nginx 的小伙伴应该都知道,这个中间件是可以设置跨域的,作为今天的主角,同样的 反向代理中间件的 YARP 毫无意外也支持了跨域请求设置. 有些小伙伴可能会问了,怎样才算是跨域呢? 在 H ...
- Spring 完美配置跨域请求
在SpringBoot2.0 上的跨域 用以下代码配置 即可完美解决你的前后端跨域请求问题 import org.springframework.context.annotation.Bean; im ...
- nginx配置跨域、gzip加速、代理详细讲解
1.配置跨域 这个很简单,直接打开配置nginx.conf ,在http下配置下面三行代码:当然如果你是想某一个虚拟主机下跨域,那就在哪个server下面添加 add_header Access-Co ...
随机推荐
- Hibernate关系映射时出现的问题
在学习Hibernate框架的关系映射时,遇到了一个问题: INFO: HHH000422: Disabling contextual LOB creation as connection was n ...
- 浏览器模式&用户代理字符串(IE)
问题问题描述今天在做项目的时候,QA部门提了一个Bug,在一个搜索列表中,搜索栏为空时刷新页面,却触发了搜索功能,并且列表显示出<未搜索到结果> 环境IE11 问题原因 QA的IE11用户 ...
- [Vuex] Use Namespaces in Vuex Stores using TypeScript
Even by using modules, they still share the same namespace. So you couldn’t have the same mutation n ...
- gdb调试常用实用命令和core dump文件的生成(转)
1.生成core dump文件的方法: $ ulimit -c //查看是否为0 如果为0 $ ulimit -c unlimited 这样在程序崩溃以后会在当前目录生成一个core.xxxx的 ...
- 百度富文本编辑器整合fastdfs文件服务器上传
技术:springboot+maven+ueditor 概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...
- Docker入门实践
Docker是一门很成熟的容器技术,类似虚拟机技术主要用做环境的隔离,方便环境的复制镜像,虚拟机是基于操作系统这一层的,而Docker更加的轻量级,像是“应用”层级的.比如我需要一个MySQL环境.一 ...
- bootstrap-datepicker应用
参考本人的github:https://github.com/gmqllf/Datepicker-for-Bootstrap (fork官方的) 一.使用datepicker for bootstra ...
- 时间序列异常检测算法S-H-ESD
1. 基于统计的异常检测 Grubbs' Test Grubbs' Test为一种假设检验的方法,常被用来检验服从正太分布的单变量数据集(univariate data set)\(Y\) 中的单个异 ...
- Could not resolve all dependencies for configuration ':classpath'
我这里是copy过来的项目包名没有修改,导致依赖找不到
- RapidJson 的使用
rapidjson为了最大化性能,大量使用了浅拷贝,使用之前一定要了解清楚.如果采用了浅拷贝,特别要注意局部对象的使用,以防止对象已被析构了,却还在被使用. rapidjson使用注意点: 1.对不存 ...