说说 H5 前端开发中的 CORS 机制-H5教程-PHP中文网

说说 H5 前端开发中的 CORS 机制

蓮花仙者

发布： 2025-04-07 09:46:58

原创

326人浏览过

cors是跨源资源共享机制，允许服务器放宽同源策略限制，实现跨域请求。1)预检请求：浏览器发送options请求询问服务器是否允许跨域。2)服务器响应：若允许，返回cors头信息。3)实际请求：通过预检后，浏览器发送请求并包含origin头。4)服务器处理：检查origin头，决定是否允许请求并返回cors头。

说说 H5 前端开发中的 CORS 机制

引言

你问我 CORS 是什么？在 H5 前端开发中，CORS（Cross-Origin Resource Sharing，跨源资源共享）是一个关键的安全机制，用来解决跨域资源请求的问题。今天我们就来深挖一下这个话题。我会从基础概念讲起，然后详细分析 CORS 的工作原理，再通过实际的代码示例来展示如何在项目中应用 CORS。读完这篇文章，你将对 CORS 有更深入的理解，并且能够在开发中灵活运用。

基础知识回顾

在讲 CORS 之前，我们得先明白什么是“同源策略”。同源策略是浏览器的一个安全功能，它限制了一个源（域、协议、端口）的文档或脚本如何能与另一个源进行交互。简单来说，如果你的网页和要请求的资源不在同一个源下，浏览器就会阻止这个请求。

CORS 就是为了解决这个限制而生的。它允许服务器表明哪些源有权限访问哪些资源。通过在 HTTP 头中添加特定的字段，服务器可以放宽同源策略的限制，允许跨域请求。

立即学习“前端免费学习笔记（深入）”；

核心概念或功能解析

CORS 的定义与作用

CORS 是一种机制，允许服务器放宽同源策略的限制，允许跨域请求。它的主要作用是让服务器能够明确地告诉浏览器，哪些源可以访问它的资源。这对于现代 Web 应用来说至关重要，因为很多应用都需要从不同的源获取数据。

举个简单的例子，假设你有一个前端应用运行在 http://example.com，而你的 API 服务器运行在 http://api.example.com。没有 CORS，你的浏览器会阻止前端应用请求 API 服务器的数据。通过 CORS，API 服务器可以告诉浏览器，http://example.com 是有权限访问它的资源的。

CORS 的工作原理

CORS 的工作原理主要通过 HTTP 头来实现。当浏览器发起一个跨域请求时，它会先发送一个预检请求（OPTIONS 请求），来询问服务器是否允许这个跨域请求。如果服务器允许，它会返回一些特定的 HTTP 头来表明它的意愿。

以下是 CORS 工作的几个关键步骤：

预检请求：浏览器发送一个 OPTIONS 请求到服务器，询问是否允许跨域请求。这个请求会包含一些头信息，如 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers。
服务器响应：如果服务器允许这个请求，它会返回一些 CORS 相关的头信息，如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。
实际请求：如果预检请求通过，浏览器会发送实际的请求，并在请求中包含 Origin 头。
服务器处理：服务器会检查 Origin 头，并根据 CORS 策略决定是否允许这个请求。如果允许，它会返回相应的 CORS 头。

这里有一个简单的 Node.js 服务器示例，展示如何设置 CORS：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from the API!' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

登录后复制

这个例子中，我们使用 Express 中间件来设置 CORS 头，允许所有源访问我们的 API。

使用示例

基本用法

在前端应用中，使用 CORS 非常简单。你只需要像平常一样发起请求，浏览器会自动处理 CORS 相关的逻辑。例如，使用 Fetch API：

fetch('http://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

登录后复制

这个请求会自动触发 CORS 机制，如果服务器设置了正确的 CORS 头，请求就会成功。

高级用法

在一些复杂的场景下，你可能需要处理预检请求，或者设置更细粒度的 CORS 策略。例如，你可能只想允许特定的源访问你的 API：

app.use((req, res, next) => {
  const allowedOrigins = ['http://example.com', 'http://subdomain.example.com'];
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  next();
});

登录后复制

这个例子中，我们只允许特定的源访问我们的 API，并且设置了更多的 HTTP 方法。