百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

CORS 幕后实际工作原理(cors的工作原理)

ztj100 2025-07-09 18:38 3 浏览 0 评论

跨域资源共享 (CORS) 是 Web 浏览器实施的一项重要安全机制,用于保护用户免受潜在恶意脚本的攻击。然而,这也是开发人员(尤其是 Web 开发新手)感到沮丧的常见原因。小编在此将向大家解释它存在的原因,并提供处理与 CORS 相关问题的策略。

什么是 CORS?

CORS 是由 Web 浏览器实现的一项安全功能,用于控制从资源来源域之外的其他域对网页上的资源(如 API 或字体)的访问。

同源策略

要理解 CORS,我们首先需要了解同源策略。此策略是 Web 浏览器中的一项基本安全措施,用于限制从一个来源加载的文档或脚本如何与来自另一个来源的资源进行交互。来源由协议、域和端口的组合定义。

例如:

  • https://example.com/page1且https://example.com/page2有相同的起源。
  • https://example.com并且http://example.com有不同的来源(不同的协议)
  • https://example.com并且https://api.example.com具有不同的来源(不同的子域)。

为什么存在 CORS

引入 CORS 是为了允许服务器指定哪些来源可以访问其资源,从而以受控的方式放宽同源策略。这对于经常需要向托管在不同域上的 API 发出请求的现代 Web 应用程序至关重要。

常见 CORS 错误

开发人员在尝试从 Web 应用程序向其他域上的 API 发出请求时经常会遇到 CORS 错误。典型的 CORS 错误可能如下所示:

Access to fetch at 'https://api.example.com/data' from origin 'https://myapp.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.

CORS 的工作原理

当 Web 应用程序发出跨源请求时:

  1. 浏览器发送请求时附带一个Origin标头,指定请求页面的来源。
  2. 然后服务器可以响应:
  • 指定Access-Control-Allow-Origin允许哪些来源的标头。
  • 控制允许的方法、标头等的其他 CORS 标头。

3. 如果服务器的响应不包含适当的 CORS 标头,浏览器将阻止响应。

解决 CORS 问题

1. 服务器端配置

解决 CORS 问题的最正确方法是配置服务器以发送正确的 CORS 标头。这通常涉及:

  • 设置Access-Control-Allow-Origin标题以指定允许的来源。
  • 根据需要配置其他 CORS 标头(例如Access-Control-Allow-Methods,Access-Control-Allow-Headers)。

使用 Express 的 Node.js 示例:

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

app.use(cors({
  origin: 'https://myapp.com'
}));

2. 使用代理

如果您无法控制服务器,则可以设置代理服务器来添加必要的 CORS 标头。这通常在开发环境中完成。

使用 Create Vue App 的代理功能的示例:

在package.json:

{
  "proxy": "https://api.example.com"
}

3. JSONP(仅适用于 GET 请求)

JSONP(带填充的 JSON)是一种较旧的技术,它可以通过使用不受同源策略约束的脚本标签来绕过 GET 请求的 CORS。

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

注意:JSONP 被认为是过时的,并且不如正确的 CORS 实现安全。

最佳实践

  1. 了解安全隐患:不要盲目绕过 CORS。它的存在是有原因的。
  2. 使用特定来源:避免*在Access-Control-Allow-Origin生产中使用。指定确切的允许来源。
  3. 使用特定于环境的配置:对开发和生产环境有不同的 CORS 设置。
  4. 处理预检请求:对于非简单请求,正确处理 OPTIONS 请求。
  5. 牢记安全:请记住,CORS 是由浏览器强制执行的。服务器端安全措施仍然是必要的。

最后

如果您遇到 CORS 问题,第一步是确定您是否可以控制服务器。如果可以,实施适当的 CORS 标头是最好的解决方案。如果没有,请考虑使用代理,或者作为简单 GET 请求的最后手段,使用 JSONP。

相关推荐

前端案例·程序员的浪漫:流星雨背景

如果文章对你有收获,还请不要吝啬【点赞收藏评论】三连哦,你的鼓励将是我成长助力之一!谢谢!(1)方式1:简单版本【1】先看实现效果...

UI样式iPod classic的HTML本地音乐播放器框架

PS:音量可以鼠标点击按住在音量图标边的轮盘上下拖拽滑动音量大小中心按钮可以更改播放器为白色...

JavaScript 强制回流问题及优化方案

JavaScript代码在运行过程中可能会强制触发浏览器的回流(Reflow)...

Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练

最近Ai火的同时,Ai编辑器Cursor同样火了一把。今天我们就白漂一下Cursor,使用免费版本搞一个零基础教程...

19年前司机被沉尸水库!凶手落网,竟已是身家千万的大老板

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

全民健身网络热度调查“居家健身”成为第一网络热词

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

取代JavaScript库的10个现代Web API及详细实施代码

为什么浏览器内置的API你还在用某个臃肿的Javascript库呢?用内置的API有什么好处呢?Web平台经历了巨大演进,引入了强大的原生API,不再需要臃肿的JavaScript库。现代浏览器现已支...

前端文件下载的N种姿势:从简单到高级

文件下载是web开发里一个非常常见的功能,无论是下载用户生成的数据、图片、文档还是应用程序包。前端开发者有多种方式来实现这一需求,每种方式都有其适用场景和优缺点。介绍下几种比较常用的文件下载方法。...

JavaScript 性能优化方法(js前端性能优化)

JavaScript性能优化方法减少DOM操作频繁的DOM操作会导致浏览器重绘和回流,影响性能。使用文档片段(DocumentFragment)或虚拟DOM技术减少直接操作。...

DOM节点的创建、插入、删除、查找、替换

在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作。一、创建DOM节点使用的命令是varoDiv=document.createElement...

前端里的拖拖拽拽(拖拽式前端框架)

最近在项目中使用了react-dnd,一个基于HTML5的拖拽库,“拖拽能力”丰富了前端的交互方式,基于拖拽能力,会扩展各种各样的拖拽反馈效果,因此有必要学习了解,最好的学习方式就是实操!...

大模型实战:Flask+H5三件套实现大模型基础聊天界面

本文使用Flask和H5三件套(HTML+JS+CSS)实现大模型聊天应用的基本方式话不多说,先贴上实现效果:流式输出:思考输出:聊天界面模型设置:模型设置会话切换:前言大模型的聊天应用从功能...

SSE前端(sse前端数据)

<!DOCTYPEhtml><htmllang="zh-CN"><head>...

课堂点名总尴尬?试试 DeepSeek,或能实现点名自由!(附教程)

2025年2月26日"你有没有经历过这样的场景?老师拿着花名册扫视全班:'今天我们来点名...'那一刻心跳加速,默念:'别点我!'但现在,我要...

我会在每个项目中复制这10个JS代码片段

你是否也有这种感觉:在搭建新项目时,你会想:"这个函数我是不是已经写过了...在某个地方?"是的——我也是。所以在开发了数十个React、Node和全栈应用后,我不再重复造轮子。我创建...

取消回复欢迎 发表评论: