华为云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 Response返回值的最佳处理方案

《JavaResponse返回值的最佳处理方案》在开发Web应用程序时,我们经常需要通过HTTP请求从服务器获取响应数据,这些数据可以是JSON、XML、甚至是文件,本篇文章将详细解析Java中处理... 目录摘要概述核心问题:关键技术点:源码解析示例 1:使用HttpURLConnection获取Resp

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

SpringBoot首笔交易慢问题排查与优化方案

《SpringBoot首笔交易慢问题排查与优化方案》在我们的微服务项目中,遇到这样的问题:应用启动后,第一笔交易响应耗时高达4、5秒,而后续请求均能在毫秒级完成,这不仅触发监控告警,也极大影响了用户体... 目录问题背景排查步骤1. 日志分析2. 性能工具定位优化方案:提前预热各种资源1. Flowable

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