软件测试 / 测试开发 / 全日制 |理解 CORS 与跨域资源共享的应用

霍格沃兹测试开发学社推出了《Python 全栈开发与自动化测试班》。本课程面向开发人员、测试人员与运维人员，课程内容涵盖 Python 编程语言、人工智能应用、数据分析、自动化办公、平台开发、UI 自动化测试、接口测试、性能测试等方向。为大家提供更全面、更深入、更系统化的学习体验，课程还增加了名企私教服务内容，不仅有名企经理为你 1v1 辅导，还有行业专家进行技术指导，针对性地解决学习、工作中遇到的难题。让找工作不再是难题，并且能助力你拿到更好的绩效与快速晋升。

**跨域资源共享（CORS）**是一种机制，它使用额外的 HTTP 头来告诉浏览器允许一个 Web 页面从另一个域（网站）发起请求。CORS 被设计为浏览器和服务器之间进行沟通的一种方式，以确保安全性和防止跨站请求伪造（CSRF）等攻击。

CORS 的工作原理：

1. 发起请求： 当浏览器发起一个跨域请求时，例如从 http://domain-a.com 向 http://domain-b.com 发起请求，浏览器会在请求头中添加一个 Origin 字段，标识请求发起的源。

2. 服务器响应： 服务器会检查请求头中的 Origin 字段，并判断是否允许该源访问资源。如果允许，服务器会在响应头中添加一个 Access-Control-Allow-Origin 字段，表示允许的源。

3. 浏览器处理： 如果服务器的响应中包含了合适的 Access-Control-Allow-Origin 头，浏览器会允许页面访问响应中的数据，否则会抛出跨域错误。

CORS 的常见头信息：

• Origin： 指示请求的来源，由浏览器自动添加。

• Access-Control-Allow-Origin： 指定哪些域是被允许访问资源的。可以是具体的域名，也可以是 * 表示允许所有域。

• Access-Control-Allow-Methods： 指定被允许的 HTTP 方法。

• Access-Control-Allow-Headers： 指定浏览器允许访问的响应头。

• Access-Control-Allow-Credentials： 表示是否允许发送 Cookie。如果设置为 true，则允许发送 Cookie。

• Access-Control-Expose-Headers： 指定哪些响应头可以暴露给前端 JavaScript 代码。

使用 CORS 的应用：

1. 前端 AJAX 请求：

const xhr = new XMLHttpRequest();xhr.open('GET', 'http://api.example.com/data', true);xhr.withCredentials = true; // 允许发送 Cookiexhr.onreadystatechange = function() {  if (xhr.readyState === 4 && xhr.status === 200) {    console.log(xhr.responseText);  }};xhr.send();

2. 后端配置：

在后端服务器的响应中添加 CORS 头：

// Node.js Express 示例const express = require('express');const app = express();
app.use((req, res, next) => {  res.header('Access-Control-Allow-Origin', 'http://domain-a.com');  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');  res.header('Access-Control-Allow-Credentials', 'true');  next();});
app.get('/data', (req, res) => {  res.send('Hello from http://api.example.com!');});
app.listen(3000, () => {  console.log('Server is running on port 3000');});

注意事项：

1. 安全性考虑： 使用 Access-Control-Allow-Origin: * 可能会造成安全风险，最好指定允许的具体域。

2. 复杂请求： 对于某些类型的请求（例如带有特殊请求头或使用非简单 HTTP 方法的请求），浏览器会先发送一个预检请求（Preflight Request）。

3. 带凭证的请求： 如果请求需要带有凭证（Cookie、HTTP 认证等），服务器需要在响应中设置 Access-Control-Allow-Credentials: true。

CORS 是一种为浏览器和服务器之间实现安全跨域通信的机制，了解和正确使用 CORS 对于构建现代 Web 应用是至关重要的。

推荐

Python 全栈开发与自动化测试开发班

由浅入深实战进阶，从小白到高手

以 Python 全栈开发为基础，深入教授自动化测试技能，为学员打造全面的技术能力。通过系统学习和实际项目实战，学员将具备在职场中脱颖而出的竞争力。不仅能够灵活运用 Python 进行开发，还能够保障项目质量通过自动化测试手段。这是一个全面提升职业竞争力的机会。

课程详情

Python 开发必备基础技能与项目实战

Pvthon 编程语言/算法和数据结构/面向对象编程 Web 后端开发/前端开发/测试管理平台项目实战

人工智能 ChatGPT 实战

人工智能辅助学习各种开发和测试技能/Pytorch 深度学框架/平台开发实战

数据分析与自动化办公

数据采集/Pandas 与数据处理技术/ECharts 与数据可视化技术/爬虫实战/自动化办公/批量文件处理

UI 自动化测试与高级项目实战

Web 自动化测试/App 自动化测试/ PageObject 设计模式

接口自动化测试

接口协议分析/Mock 实战/服务端接口测试

性能测试

性能测试流程与方法/JMeter 脚本参数化/Grafana 监控系统搭建

简历指导与模拟面试

1V1 简历指导/模拟真实面试/测试开发岗面试全攻略名企私教服务

名企专家 1v1 辅导/行业专家技术指导/针对性解决工作难题/绩效提升辅导与晋升复盘

课程亮点

名企私教服务 先学习后付费 高额奖学金

专属社群+晚自习在线答疑

5V1 全方位辅导作业+考试强化学习效果

简历修改 模拟面试 就业内推 面试复盘