华为云APIG跨域资源共享方案

2024-03-18 07:52

本文主要是介绍华为云APIG跨域资源共享方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


 

## 浏览器的同源策略

浏览器的同源策略是一种安全机制,旨在保护用户的信息安全和隐私。它限制了一个网页的脚本只能与来自同一源的资源进行交互,即同源策略要求页面中加载的所有资源(包括脚本、样式表、图片等)必须来自相同的**域名、协议、端口**。

同源策略的存在是基于以下安全考虑:

* 保护用户隐私: 同源策略防止来自不同源的脚本获取用户敏感信息,比如 Cookie、LocalStorage 和 SessionStorage 等。

* 防止跨站请求伪造(CSRF): 如果不限制跨域请求,恶意网站就可以利用用户的登录状态发起对其他网站的请求,从而导致 CSRF 攻击。

* 防止跨站脚本攻击(XSS): 同源策略可以防止恶意网站将恶意脚本注入到另一个域上的页面中,从而避免对用户的攻击。

* 保护服务器的数据安全: 同源策略可以保护服务器的数据不被其他域的恶意脚本盗取或篡改。

虽然同源策略在保护用户安全和隐私方面非常重要,但同时它也会对一些合法的跨域资源请求造成限制,这就需要使用 CORS 等机制来安全地实现跨域资源共享。


 

## 跨域资源共享

跨域资源共享(Cross-Origin Resource Sharing,简称CORS)是一种机制,允许在一个网页应用程序中请求来自另一个域的资源,即允许在一个域上使用其他域的资源。CORS的出现是为了解决网页应用程序对其他域资源的访问受到同源策略(Same-Origin Policy)限制的问题。

同源策略是浏览器安全模型的一部分,它限制了来自不同源(域、协议或端口)的页面之间的交互。这个策略的目的是防止恶意网站利用用户登录状态、cookie 等敏感信息。虽然这在安全上是有益的,但对于某些情况下需要跨域资源访问的网页应用程序来说,这会成为一个障碍。

跨域资源共享通过在服务器端添加一些特殊的 HTTP 头部,允许浏览器绕过同源策略的限制,从而允许跨域请求。通过配置 CORS,服务器可以告诉浏览器哪些源是被允许访问资源的,以及允许的 HTTP 方法。

主要原因包括:

* 分布式架构:现代网络应用程序通常采用分布式架构,可能需要从不同的服务器获取资源,而不仅限于同一个域。

* 共享资源:某些资源可能在不同的域上,并且需要被其他域的应用程序使用。例如,图像、视频或 API。

* 合作开发:跨域资源共享也可以促进不同团队之间的合作开发,允许他们在不同的域上进行开发并共享资源。

总的来说,CORS 是为了提高 Web 应用程序的灵活性和互操作性,同时仍然保持了足够的安全性。


 

## 和跨域资源共享相关的HTTP标头字段

跨源资源共享标准新增了一组 HTTP 标头字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。分为两类:响应头字段,请求头字段。

### 响应头字段

* Access-Control-Allow-Origin

语义:通知浏览器可以允许正式请求发向哪些源(origin)。

语法:

```shell

Access-Control-Allow-Origin: * # 通配符,允许所有源

Access-Control-Allow-Origin: <origin> # 只能为单个源,不能为多个

Access-Control-Allow-Origin: null # 可以为null

```

* Access-Control-Allow-Methods

语义: preflight request(预检请求)的返回响应头字段,定义正式请求可以向跨域服务器发送哪些请求头方法

语法:

```shell

Access-Control-Allow-Methods: <method>, <method>, ... # 逗号隔开

```

* Access-Control-Allow-Headers

语义: preflight request(预检请求)的返回响应头字段,定义正式请求可以向跨域服务器发送哪些请求头字段

语法:

```shell

Access-Control-Allow-Headers: <header-name>[, <header-name>]* # 逗号隔开

Access-Control-Allow-Headers: * # 可以为通配符,支持正式请求传任何头字段

```

>

>tips: Accept、Accept-Language、Content-Language、Content-Type(只限于解析后的值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三种 MIME 类型),不需要在这个首部特意列出,默认会添加。

>

* Access-Control-Max-Age

语义:表示preflight request (预检请求)的返回结果(即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息)可以被缓存多久

语法:

```shell

Access-Control-Max-Age: <delta-seconds> # 单位为秒

```

>

>tips: <delta-seconds>,根据浏览器版本不同,缓存时间不同,在 Firefox 中,上限是 24 小时 (即 86400 秒)。 在 Chromium v76 之前, 上限是 10 分钟(即 600 秒)。 从 Chromium v76 开始,上限是 2 小时(即 7200 秒)。 Chromium 同时规定了一个默认值 5 秒。 如果值为 -1,表示禁用缓存,则每次请求前都需要使用 OPTIONS 预检请求。

>

* Access-Control-Allow-Credentials

语义:用于在请求要求包含 credentials(Request.credentials 的值为 include)时,告知浏览器是否可以将对请求的响应暴露给前端 JavaScript 代码。 浏览器仅在响应标头 Access-Control-Allow-Credentials 的值为 true 的情况下将响应暴露给前端的 JavaScript 代码。

Credentials 可以是 cookies、authorization headers 或 TLS client certificates。

语法:

```shell

Access-Control-Allow-Credentials: true

```

>

>tips: 跨域后端响应的Access-Control-Allow-Credentials header 与前端请求的XHR 或 Fetch request中都要配置,浏览器才会允许正式请求携带credentials到跨域端

>

* Access-Control-Expose-Headers

语义: 如果跨域服务器设置返回该字段,正式请求会收到该响应字段,允许服务器指示哪些正式请求的响应标头可以暴露给浏览器中运行的js脚本

语法:

```shell

Access-Control-Expose-Headers: [<header-name>[, <header-name>]*] # 逗号分隔

Access-Control-Expose-Headers: * # 通配符,指示浏览器允许js脚本读取所有响应头

```

### 请求头字段

* Access-Control-Request-Headers

语义: preflight request(预检请求)中,用于通知服务器在正式请求中会采用哪些请求头。

语法:

```shell

Access-Control-Request-Headers: <header-name>, <header-name>, ...

```

* Access-Control-Request-Method

语义: preflight request(预检请求)中,用于通知服务器在正式请求中会采用哪种 HTTP 方法。因为预检请求所使用的方法总是 OPTIONS ,与实际请求所使用的方法不一样,所以这个请求头是必要的。

语法:

```shell

Access-Control-Request-Method: <method>

```

## 简单请求和非简单请求

浏览器跨域之前的请求可以分为**简单请求**和**非简单请求**两种,简单请求实现浏览器跨域仅需要一次request-response,非简单请求实现浏览器跨域需要两次request-response(含有预检请求的跨域请求都是非简单请求)

### 简单请求

满足如下两个条件

* 方法为 GET, HEAD, POST 其中一种,

* 除了被浏览器自动设置的请求头

Accept, Accept-Language, Content-Language, Content-Type(只允许如下三种:text/plain, multipart/form-data, application/x-www-form-urlencoded),Range(只允许简单的范围标头值 如 bytes=256- 或 bytes=127-255)

### 非简单请求

不满足简单请求的条件,都是非简单请求


 

## 演示

以华为云APIG提供的跨域资源共享方案为例,来展示实现跨域的细节,待补充



 

```js

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com/api/data', true);

xhr.withCredentials = true; // withCredentials 标志设置为 true,从而向服务器发送 Cookies

// 发送请求

xhr.send();

// 处理响应

xhr.onload = function () {

if (xhr.status === 200) {

// 打印响应头

for (var key in xhr.getAllResponseHeaders()) {

console.log(key + ': ' + xhr.getResponseHeader(key));

}

// 打印响应体

console.log(xhr.responseText);

} else {

console.error('请求失败。 返回状态为 ' + xhr.status);

}

};

// 处理网络错误

xhr.onerror = function () {

console.error('网络错误');

};

```


 

##### 参考文档

[CORS官方文档](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)

[华为云apig官方文档](https://support.huaweicloud.com/usermanual-apig/apig-ug-0002.html

)


 

这篇关于华为云APIG跨域资源共享方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/821682

相关文章

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

IDEA中Git版本回退的两种实现方案

《IDEA中Git版本回退的两种实现方案》作为开发者,代码版本回退是日常高频操作,IntelliJIDEA集成了强大的Git工具链,但面对reset和revert两种核心回退方案,许多开发者仍存在选择... 目录一、版本回退前置知识二、Reset方案:整体改写历史1、IDEA图形化操作(推荐)1.1、查看提

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数,你可以定义好线程数规则,生成线程数去跑代码说明:1.虚拟线程池:使用 Executors.newVir

MySQL中闪回功能的方案讨论及实现

《MySQL中闪回功能的方案讨论及实现》Oracle有一个闪回(flashback)功能,能够用户恢复误操作的数据,这篇文章主要来和大家讨论一下MySQL中支持闪回功能的方案,有需要的可以了解下... 目录1、 闪回的目标2、 无米无炊一3、 无米无炊二4、 演示5、小结oracle有一个闪回(flashb

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

Spring MVC跨域问题及解决

《SpringMVC跨域问题及解决》:本文主要介绍SpringMVC跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录跨域问题不同的域同源策略解决方法1.CORS2.jsONP3.局部解决方案4.全局解决方法总结跨域问题不同的域协议、域名、端口

Java嵌套for循环优化方案分享

《Java嵌套for循环优化方案分享》介绍了Java中嵌套for循环的优化方法,包括减少循环次数、合并循环、使用更高效的数据结构、并行处理、预处理和缓存、算法优化、尽量减少对象创建以及本地变量优化,通... 目录Java 嵌套 for 循环优化方案1. 减少循环次数2. 合并循环3. 使用更高效的数据结构4

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计