web运维:跨域(NGINX跨域配置为例)_没有配置access-control-allow-methods-程序员宅基地

技术标签: 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

智能推荐

请求模块urllib的基本使用_with open 保存图片-程序员宅基地

文章浏览阅读3.2k次,点赞54次,收藏78次。在实现网络爬虫的爬取工作时,就必须使用网络请求,只有进行了网络请求才可以对响应结果中的数据进行提取,urllib模块是python自带的网络请求模块,无需安装,导入即可使用。下面将介绍如果使用python中的urllib模块实现网络请求_with open 保存图片

Android底层JNI中的JavaVM和JNIEnv对象_jnivlzm-程序员宅基地

文章浏览阅读1.2k次。最近在做关于安卓安全方面的东西,需要对底层进行注入,在看雪论坛上看了不少资料,查阅了相关书籍了解了一下,需要用到JNI。利用JNI可以实现Java和底层的C/C++模块相互沟通(NDK的框架用到了该外观设计模式,Facade Pattern) 其具体步骤如下:(1)创建一个包含native本地方法的类;(2)利用javah工具生成C/C++语言的头文件;(3)创建.c源文件,使用C/C++实_jnivlzm

RSA算法进行 数据加解密 与 数字签名、哈希(Hash) 摘要_哈希算法与rsa算法-程序员宅基地

文章浏览阅读485次,点赞9次,收藏6次。RSA算法进行 数据加解密 与 数字签名;_哈希算法与rsa算法

HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头_html轮播图添加左右箭头-程序员宅基地

文章浏览阅读3.2k次。HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头_html轮播图添加左右箭头

Android渲染(一)------ Shader之SweepGradient用法(雷达扫描效果)_android sweepgradient-程序员宅基地

文章浏览阅读707次。Shader定义:官方的定义是这样的: Shader是返回水平跨度颜色的对象的基类,绘图期间。 Shader的子类安装在Paint调用中,paint.setShader(着色器)。 之后的任何对象(除了位图之外)都是使用该绘制绘制将从着色器获取其颜色。它有五个子类,分别是:SweepGradient、LinearGradient、BitmapShader、Compose..._android sweepgradient

no2222_通信emm substate-程序员宅基地

文章浏览阅读530次。222_通信emm substate

随便推点

Error:Internal error: (java.io.FileNotFoundException) D:\code\project\.idea\misc.xml (The sys-程序员宅基地

文章浏览阅读1.6k次。 Intellij idea找不到misc.xml文件,关闭当前项目IDE,重新打开idea, File -> import project,即可重新生成该文件_error:internal error: (java.io.filenotfoundexception)

每日模板一练——并查集-程序员宅基地

文章浏览阅读129次。洛谷2814极度细(毒)节(瘤)的字符串处理,以及最后一步弄错。。。。。(水了70分?)【代码~】 #include<bits/stdc++.h>using namespace std;const int MAXN=5e4+10;map<string,int> name;map<int,string> id;map<string...

生成报表(转)-程序员宅基地

文章浏览阅读123次。使用JasperReport+iReport进行WEB开发    一、JasperReport和iReport简介:   1、JasperReport简介   JasperReport是一个强大、灵活的报表生成工具,是开放源代码组织sf.net中的...

哈希表-程序员宅基地

文章浏览阅读3k次,点赞5次,收藏18次。初入数据结构的哈希表(Hash Table)这次我们来总结一下关于哈希表的知识,首先我们要了解什么是哈希表,哈希函数的构造思路有哪些?怎么解决哈希冲突?最后再去分析一下哈希查找算法。哈希表的概念 前提小知识什么是哈希表?哈希表的四个概念关键字、值、哈希函数、哈希地址、哈希表之间的关系?什么是哈希冲突常见的哈希函数构造方法 怎么样才是好的哈希函数?常见构建哈希函数的六个方法...

VS报错 error LNK2005: _DllMain@12 已经在 MSVCRTD.lib(dllmain.obj) 中定义 链接报错: 错误 33 error LNK2005: _DllMai_error lnk2005: _dllmain@12 已经在 msvcrtd.lib(dll_dll-程序员宅基地

文章浏览阅读584次。VS报错 error LNK2005: _DllMain@12 已经在 MSVCRTD.lib(dllmain.obj) 中定义链接报错:错误 33 error LNK2005: _DllMain@12 已经在 MSVCRTD.lib(dllmain.obj) 中定义 E:\客户问题\w_王鹏\EventLibTest_TibrvAlternative_Mult_error lnk2005: _dllmain@12 已经在 msvcrtd.lib(dll_dllmain_stub.obj) 中定义

什么是soap_soap是指什么-程序员宅基地

文章浏览阅读645次。SOAP (Simple Object Access Protocol) 顾名思义,是一个严格定义的信息交换协议,用于在Web Service中把远程调用和返回封装成机器可读的格式化数据。事实上SOAP数据使用XML数据格式,定义了一整套复杂的标签,以描述调用的远程过程、参数、返回值和出错信息等等。而且随着需要的增长,又不得增加协议以支持安全性,这使SOAP变得异常庞大,背离了简单的初衷。另一方面,各个服务器都可以基于这个协议推出自己的API,即使它们提供的服务及其相似,定义的API也不尽相同,这又导致.._soap是指什么