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

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) =&gt; {
  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) =&gt; {
  res.json({ message: 'hello from the api!' });
});

app.listen(3000, () =&gt; {
  console.log('server running on port 3000');
});

登录后复制

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

使用示例

基本用法

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

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

登录后复制

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

高级用法

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

app.use((req, res, next) =&gt; {
  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 方法。