详解如何使用Nginx解决跨域问题


Posted in Servers onMay 06, 2022

先来说一下什么是同源策略

同源(域名、协议、端口相同)策略是一种约定,是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,浏览器的正常功能将受到影响。

什么是跨域?

跨域就是跨域名,跨端口,跨协议(非同源策略)。

跨域分类

简单说,跨域分为 简单跨域复杂跨域

简单跨域:不会发送OPTIONS请求。

复杂跨域:会发送一个预检查OPTIONS请求。

复杂跨域的条件是:

①、非GET、HEAD、POST请求。

②、POST请求的Content-Type不是application/x-www-form-urlencoded, multipart/form-data, 或text/plain。

③、添加了自定义header,例如Token。

跨域请求浏览器会在Headers中添加Origin,通常情况下不允许用户修改其值。

Nginx解决跨域问题

跨域是前后端分离开发中非常常见的问题。无论用什么编程语言,现在都已经很难离开Nginx。因此直接在Nginx中处理跨域问题有得天独厚的优势。当出现跨域问题的时候,只需要给Nginx服务器配置响应的header参数即可。

只需要在Nginx的配置文件中配置以下参数:

location / { ``  ``add_header Access-Control-Allow-Origin *;``  ` `  ``add_header ``'Access-Control-Allow-Credentials'` `'true'``; ``# 是否允许后续请求携带cookies,该值只能是true,否则不返回。如果上面的Access-Control-Allow-Origin设置的是* 而你又需要cookie信息,则 必须设置这行。``  ` `  ``add_header Access-Control-Allow-Methods ``'GET, POST, OPTIONS'``;``  ` `  ``add_header Access-Control-Allow-Headers *;` `  ``if` `($request_method = ``'OPTIONS'``) {``    ``return` `204;``  ``}``}

上面的配置代码即可解决跨域问题了,不想深入研究的,看到这里就可以了=-=

解释

1、Access-Control-Allow-Origin

服务器默认是不被允许跨域的。给Nginx配置Access-Control-Allow-Origin * 后,表示服务器可以接受所有的请求源(Origin),即接受所有跨域的请求。也就是说,表示接受任意域名的请求。上面我们这里设置的是* 这是最简单粗暴的方式,但是服务器出于安全考虑,肯定不会这么干,而且,如果是*的话,游览器将不会发送cookies数据(如果需要携带cookies数据,则需要设置 'Access-Control-Allow-Credentials:true')。

所以Access-Control-Allow-Origin一般都是设置为 指定域(也就是指定 某一个url来请求我服务器)的方式。指定域 设置的方式如下:

add_header Access-Control-Allow-Origin 'www.test.com'; 注意:只能指定一个域

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 添加 204的返回,是为了处理在发送POST请求时Nginx依然拒绝访问的错误

发送"预检请求"时,需要用到方法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

POST请求中的Content-Type不是上面这三种的其中一种的话,都属于预检请求。(上面也有提到过,就是 复杂跨域的条件中的第②步)

所以 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.

尾声

解决跨域的解决方案有很多种,最常见也是最传统的解决方式是使用JSONP的方式。CORS与JSONP的使用目的相同,但是比JSONP更强大。

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

到此这篇关于如何使用Nginx解决跨域问题的文章就介绍到这了!


Tags in this post...

Servers 相关文章推荐
基于Nginx实现限制某IP短时间访问次数
Mar 31 Servers
Nginx搭建rtmp直播服务器实现代码
Mar 31 Servers
nginx proxy_cache 缓存配置详解
Mar 31 Servers
Nginx使用Lua模块实现WAF的原理解析
Sep 04 Servers
Nginx 路由转发和反向代理location配置实现
Nov 11 Servers
CKAD认证中部署k8s并配置Calico插件
Mar 31 Servers
为Centos安装指定版本的Docker
Apr 01 Servers
Linux下使用C语言代码搭建一个简单的HTTP服务器
Apr 13 Servers
Nginx配置使用详解
Jul 07 Servers
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
Jul 15 Servers
Nginx如何获取自定义请求header头和URL参数详解
Jul 23 Servers
Windows7下FTP搭建图文教程
Aug 05 Servers
配置nginx负载均衡
May 06 #Servers
tomcat下部署jenkins的方法
排查Tomcat进程假死的问题
May 06 #Servers
使用Nginx的访问日志统计PV与UV
Tomcat配置访问日志和线程数
May 06 #Servers
tomcat正常启动但网页却无法访问的几种解决方法
May 06 #Servers
tomcat默认最大连接数及相关调整方法
May 06 #Servers
You might like
php去除头尾空格的2种方法
2015/03/16 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python中xrange用法分析
2015/04/15 Python
python实现Floyd算法
2018/01/03 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Django实现单用户登录的方法示例
2019/03/28 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python生成任意频率正弦波方式
2020/02/25 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
什么是封装
2013/03/26 面试题
抗洪抢险事迹材料
2014/05/06 职场文书
家长给老师的感谢信
2015/01/20 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
python如何查找列表中元素的位置
2022/05/30 Python