web运维:跨域(NGINX跨域配置为例)_kong跨域_龙叔运维的博客-程序员秘密

技术标签: nginx  web  跨域  龙叔NGINX  

跨域在现在的web开发中,已经 是一个很常见的场景了,作为运维,也是一个应该掌握的知识点

欢迎关注 龙叔运维 (公众号)

1、什么是跨域:

比较官方的解释:

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

什么意思呢  就是你浏览器打开的网页  http://aaa.bbb.com,你在这个web页面发起的接口请求的目标地址的协议(http),域名(aaa.bbb.com),端口(80)只要有一个变了,那就是跨域

2、常见跨域的业务场景

在系统业务实现过程中,必然会有各种各样的场景遇到跨域问题,例如下面这些:

A、前端页面调用第三方后端接口

其实这是不合理的,正常的做法应该是自己的前端调自己的后端,后端去调用别的系统的接口,然后把数据返回给前端。

B、微前端场景

这种场景一般出现在大公司,一个大平台里面每个功能模块都会有单独的团队开发一个独立的web系统,有单独的域名每个集成到大平台的web系统都需要配置跨域,不然大平台就没法正常使用

3、跨域配置

跨域的配置一般在被跨域访问的一段配置,跨域配置会作为响应请求头(response header)返回给浏览器,告诉浏览器自己对跨域的配置

这里是以NGINX的配置为例的,你可以在kong网关配置,可以在项目代码后端配置,但是跨域的配置都是类似的

3.1、Access-Control-Allow-Origin

Access-Control-Allow-Origin的字面意思,直译一下:访问控制允许来源

显而易见,这是被访问的服务通过response header中的Access-Control-Allow-Origin告诉浏览器,哪些域名作为源可以跨域访问我

如aaa.test.com 去跨域访问 bbb.test.com 的接口, 那么 bbb.test.com服务就需要配置跨域:

Access-Control-Allow-Origin:aaa.test.com

或者也可以直接配置允许所有网站跨域访问自己,但是不安全

Access-Control-Allow-Origin:*

如果目标服务没有配置对Access-Control-Allow-Origin,而去跨域访问,则会有如下报错:

no 'access-control-allow-origin' header is present on the requested resource


3.2、Access-Control-Allow-Methods

然而跨域的配置不仅仅只需要配置一个配置项,往往都是多个配置项一起协同配置的

Access-Control-Allow-Methods的字面意思,直译一下:访问控制允许的方法

这是被访问的服务通过response header中的Access-Control-Allow-Methods告诉浏览器,跨域访问所被允许的请求方法

一般配置如下,允许所有方法:

Access-Control-Allow-Methods:*

或者

Access-Control-Allow-Methods:POST,PUT,GET,OPTIONS,DELETE

如果跨域请求的方法不被允许,则会报错如下:

content-type is not allowed by access-control-allow-headers in preflight response.


3.3、Access-Control-Allow-Headers

Access-Control-Allow-Headers的字面意思,直译一下:访问控制允许的请求头

这是被访问的服务通过response header中的Access-Control-Allow-Methods告诉浏览器,跨域访问世对方允许携带的header(request header)

一般配置为*就可以了,当然如果有安全需求,则根据具体情况配置:

Access-Control-Allow-Headers:*

如下request header中携带了不在被调用服务允许携带的header,则报错:

request header field content-type is not allowed by access-control-allow-headers in preflight response.


3.4、Access-Control-Allow-Credentials

Access-Control-Allow-Credentials的字面意思,直译一下:访问控制允许证书

因为有的跨域请求访问需要携带cookie进行认证,所以就需要设置为true

(如ajax跨域请求,通过设置 withCredentials: true ,发送Ajax时,Request header中便会带上 Cookie 信息。)

Access-Control-Allow-Credentials: true

否则就会报错如下:

在这里插入图片描述


3.5、Access-Control-Max-Age

Access-Control-Allow-Credentials的字面意思,直译一下:访问控制最大年龄

Access-Control-Max-Age用来指定本次预检请求的有效期,单位为秒,在此期间不用发出另一条预检请求(OPTION)。

例如:

Access-Control-Max-Age:1800,表示隔30分钟才发起预检请求,这其中则不需要再发

4、跨域其他注意点

4.1、OPTION请求

如果OPTION请求一直失败,最好给OPTION请求添加返回204的配置

如NGINX中可以加入下面内容:

if ($request_method = OPTIONS) {
      return 204;
}

4.2、带Cookie的跨域

当withCredentials设置为true时,后端Access-Control-Allow-Origin需要指定域名,不能使用*号;

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/github_30641423/article/details/127377790

智能推荐

深入理解 Java 中的锁_蔚1的博客-程序员秘密

随着各互联网大厂交易量急剧攀升,各大厂也对程序员的并发编程能力提出了一定要求。并发编程能力也是程序猿的硬核能力,有一定的门槛,程序猿有必要进行深入理解。本 Chat 将从源码层面和实际编程应用和大家共同理解 Java 中的锁。通过本 Chat 您将学到如下内容:队列同步器是啥,有什么用;ReentrantLock , Semaphore,ReentrantReadWriteLock 的实...

python docx 提取图片_python 解析docx文档的方法,以及利用Python从docx文档提取插入的文本对象和图片..._weixin_39521009的博客-程序员秘密

首先安装docx模块,通过pip install docx或者在docx官方链接上下载安装都可以下面来看下如何解析docx文档:文档格式如下有3个部分组成 1 正文:text文档 2 一个表格。 3一个插入的文件对象。4 一个图片 这4个部分是我们在docx文档中最常见的几种格式。解析代码如下importdocxdefdocx_try():doc=docx.Document(r'E:\py_prj...

Json格式字符串 如何转化成集合_json 字符串转hashset_一叶知秋灬龍的博客-程序员秘密

今天做项目遇到个问题,需要把json字符串转化list集合进行操作,在网上搜了很多资料比如需要引用命名空间using Newtonsoft.Json;System.Web.Extensions.dllpublic DataTable JsonTdb(string strJson){DataTable dataTable = new DataTable(); //实例化DataT...

企业微信逆向分析之——自己二维码——静态分析_企业微信 逆向_鱼儿-1226的博客-程序员秘密

使用工具顶部Activity(app)ddmsjadxxposed类框架分析方法静态分析技术点接口采用动态代理方式替换跟踪界面利用顶部Activity分析Activity类:com.tencent.wework.friends.controller.FriendsShareWxCardActicity分析资源idcom.tencent.wework:id/ex2android.widget.ImageViewpublic static

中职学生的计算机应用基础学生总结,加强中职学校计算机应用基础上机应用的措施分析..._隅隅隅的博客-程序员秘密

摘 要:科技的快速发展使得计算机成为我们生活的一部分,因此我们的中职教育中也加强了对计算机教学的重视。本文主要从三个方面对计算机应用基础上机应用的措施作了具体分析。首先分析了中职学校计算机应用基础的教学现状。其次,对计算机应用基础的新旧教材作了对比。最后,提出几种解决方法,来加强中职学校的计算机应用基础教学。关键词:中职学校;计算机应用基础;教师;学生;中图分类号:P315.69 文献标识码:A ...

信息安全的密码学基于sagemath的python实现(RES、AES、RSA、ECC、哈希算法以及数字签名)_python实现ecc_Life is a joke的博客-程序员秘密

Mono-alphabetic Cipheralpha="abcdefghijklmnopqrstuvwxyz"def is_alpha_char(c):return (c.lower() in alpha)def get_alpha_index(c):return alpha.index(c.lower())def get_key_index(c,key): return key.index(c.upper())def encrypt_ma(k, plaintext): cip

随便推点

2018秋招面经-后端开发_weixin_30420305的博客-程序员秘密

博主渣渣本科,挣扎到十一月秋招终于结束了。面过百度/腾讯/小米/网易/搜狗/知乎/京东/360/瓜子。期间总结了一些面试题目,现在放上来。由于是博主自己的面经记录,所以涵盖不全面的话诸位请谅解。根据博主的面试经验来看,面试有一定的层次性,如bat级别公司每个点都会深入,而有些公司则只会问到表层,所以将每个领域都分为必须掌握和深入了解这两个部分。一、计算机网络基础部分TCP报头格式...

PYTHON:单引号、双引号和三双引号的区别_Rain_Void的博客-程序员秘密

非原创,转自:https://blog.csdn.net/linda1000/article/details/8315892python单引号、双引号和三双引号的区别python字符串通常有单引号('...')、双引号("...")、三引号("""...""")或('''...''')包围,三引号包含的字符串可由多行组成,一般可表示大段的叙述性字符串。在使用时基本没有差别,但双引号和三引号(""".

4.6 浮动定位方式float_掌握float浮动定位的应用及导航链接的设置。_小昔超厉害的博客-程序员秘密

4.6 浮动定位方式float使用float属性来进行浮动定位;使用clear属性可以清除这种浮动1.float属性(设定浮动)float属性的三个取值(1)left左浮动(2)right右浮动(3)none不浮动下面是一个向左浮动的例子float属性的两个用处(1)在图文混排的时候,如果你希望图片位于文字的左侧或者右侧,那就把图片对的float属性设为left或者right;(2)在做多列盒子布局的情况,可以根据需求让盒子向左或向右浮动。float属性的特点三个盒子,默认情况

如何处理分类中的训练数据集不均衡问题_数据集均衡_天木青的博客-程序员秘密

本文参考自:http://blog.csdn.net/heyongluoyao8/article/details/49408131,有删改。 什么是数据不均衡? 在分类中,训练数据不均衡是指不同类别下的样本数目相差巨大。举两个例子: ①在一个二分类问题中...

Linux下使用vscode在线调试STM32开发板_linux st-flash_随缘|为而不争的博客-程序员秘密

Linux下使用vscode在线调试STM32开发板前言一、安装vscode Cortex-Debug扩展二、下载和安装STLink开发工具,这是Cortex-Debug需要的配套工具三、配置Cortex-Debug四、编译程序五、下载程序六、在线调试前言现在越来越多人开始喜欢在Linux环境下开发IOT或MCU程序。本人也弄了一块STM32F769I-DISCO开发板来学习,并尝试将开发板程序移植到OpenHarmony。移植期间碰到不少问题,除了编译问题外还有不少死机问题,因此必须利用在线调试工具

MQTT 一篇入门_mqtt历史_石硕页的博客-程序员秘密

目录1.什么是MQTT?2.MQTT 历史3.MQTT 功能介绍4.MQTT 协议框架5.MQTT 示例1.什么是MQTT?mqtt (Message Queuing Telemetry Transport )是一个基于客户端-服务端的消息发布/订阅传输协议,由IBM在1999年发布。因为它轻量、简单、开放和易于实现,使得它的使用范围非常广泛。mqtt 协议构建...

推荐文章

热门文章

相关标签