CORS(跨源资源共享)简介 什么是CORS?

cors(跨源资源共享)简介 什么是cors?

CORS,即跨源资源共享,是一种由 Web 浏览器实现的安全功能,允许或限制 Web 应用程序向与提供网页的域不同的域发出请求。简单来说,CORS 决定了一个域中的资源是否可以被另一个域中的网页访问。

默认情况下,Web 浏览器强制执行同源策略,该策略会阻止网页向与提供该页面的域不同的域发出请求。这样做是为了防止恶意网站访问其他网站上的敏感数据。然而,有时 Web 应用程序需要从不同的来源(域、协议或端口)请求资源,这就是 CORS 发挥作用的地方。

CORS 的实际应用

当一个域上的 Web 应用程序需要从另一个域请求数据时,它会发送一个 HTTP 请求,其中包含指示请求来源的特定标头。然后,托管所请求资源的服务器必须通过在响应中发送适当的 CORS 标头来决定是否允许该请求。

例如,如果您正在构建托管在 http://example.com 上的前端应用程序,并且它需要从 http://api.example2.com 获取数据,则 CORS 标头允许位于 api.example2 的服务器。 com 指定是否允许来自 example.com 的请求。

常见用例

以下场景通常需要 CORS:

第三方 API 访问:许多现代 Web 应用程序依赖外部 API 来提供身份验证、支付处理或社交媒体集成等服务。当这些 API 托管在不同的域上时,CORS 是必要的。

前后端通信:如果 Web 应用程序的前端和后端托管在不同的域或子域上,则使用 CORS 来允许它们之间的通信。

CDN(内容交付网络):网站通常使用 CDN 来提供静态资产,例如图像、样式表或 JavaScript 文件。 CORS 允许主站点从托管在不同源的 CDN 请求这些资源。

CORS 中的关键参数和指标

Access-Control-Allow-Origin:该标头是 CORS 中最重要的标头,指示允许哪些源访问该资源。可以设置为:

特定来源(Access-Control-Allow-Origin:https://example.com)
通配符(Access-Control-Allow-Origin:*),允许任何源访问资源。但是,对于包含凭据的请求不允许这样做。
Access-Control-Allow-Methods:指定访问资源时允许使用哪些 HTTP 方法(例如 GET、POST、PUT、DELETE)。例如:
访问控制允许方法:GET、POST、PUT

Access-Control-Allow-Headers:列出发出实际请求时可以使用的 HTTP 标头。例如,如果请求包含像 X-Custom-Header 这样的自定义标头,则应在此处指定:
访问控制允许标头:X-自定义标头,内容类型

Access-Control-Allow-Credentials:指示请求是否可以包含 cookie、HTTP 身份验证或客户端证书等凭据。这对于需要身份验证的 API 很重要。例如:Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers:指定浏览器应向请求客户端公开哪些标头。默认情况下,浏览器仅公开一组有限的标头,例如 Cache-Control 和 Content-Type,但 Access-Control-Expose-Headers 可以提供其他标头。

Access-Control-Max-Age:定义浏览器可以缓存预检请求结果(见下文)的时间。它通过减少预检请求的数量来帮助提高性能。例如:
Access-Control-Max-Age:86400(24小时)

预检请求:对于某些类型的请求,尤其是那些修改服务器数据(例如 PUT 或 DELETE)的请求,浏览器使用 HTTP OPTIONS 方法发送预检请求。这会向服务器检查实际请求是否可以安全发送。服务器对预检请求的响应决定浏览器是否继续处理实际请求。

什么时候需要 CORS?

以下情况下需要 CORS:

发出跨域请求:如果您的前端和后端由不同的域或端口提供服务,或者您从应用程序访问外部 API。

访问 CDN 或第三方服务上托管的资源:例如,如果您从 CDN 加载字体、图像或其他资源,服务器必须包含 CORS 标头以允许您的网站访问它们。

安全问题:虽然启用 CORS 允许跨域请求,但应仔细配置它以避免您的应用程序遭受恶意攻击。只应允许受信任的来源,并且应使用身份验证令牌等附加安全措施来保护敏感操作。

结论

CORS 是确保不同来源的资源安全、受控共享的重要机制。经过正确配置,它有助于现代 Web 应用程序与第三方服务和 API 交互,同时保护用户免受安全风险。对于任何使用 API、CDN 或多域应用程序的 Web 开发人员来说,了解如何配置 CORS 标头并了解何时以及为何需要它们至关重要。

以上就是CORS(跨源资源共享)简介 什么是CORS?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1497634.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 19:42:02
下一篇 2025年12月19日 19:42:13

相关推荐

  • 前端开发中的网络安全:面向开发人员的艺术系列

    在当今快速发展的网络环境中,安全性比以往任何时候都更加重要,尤其是在前端,其中的漏洞可能会导致数据泄露和用户冒充等严重后果。为了帮助前端开发人员强化他们的应用程序以抵御客户端威胁,我编写了一个关于前端开发中的网络安全的全面的 3 部分系列。 本系列将指导您完成基本的安全实践,从常见漏洞的基础知识到防…

    2025年12月19日
    000
  • Axios 响应拦截器为何无法获取特定 Header 信息?

    在 axios 响应拦截器中获取不到特定 header 信息? 在使用 axios 响应拦截器获取响应 header 信息时,发现某些信息无法获取到,例如 access-token 属性,这是怎么回事呢? 解决方法: 这个问题通常出现在跨域请求中。当发起跨域请求时,浏览器会限制前端访问响应头中的某些…

    2025年12月19日
    000
  • Nodejs + 自定义 CORS

    cors(跨源资源共享) 是一种允许一个域上的 web 应用程序访问另一个域上的资源的机制。当开发前端和后端分离并通过 api 进行通信的应用程序时,这一点至关重要。 这里有一篇文章解释了在 node.js 和 express 中不使用外部库的 cors 实现: “use strict”;/*jsh…

    2025年12月19日
    000
  • axios 响应拦截器无法获取所有 Headers 信息?如何解决跨域限制?

    无法从 axios 响应拦截器中获取所有 headers 信息? 在使用 axios 进行网络请求时,通过 axios 响应拦截器,可以方便地获取响应头信息。然而,在某些情况下,可能会遇到无法获取到所有 headers 信息的问题。 问题描述: 在拦截响应时,打印 res.headers,只得到了部…

    2025年12月19日
    000
  • 使用 axios 拦截器拦截响应时,为何无法获取所有响应头信息?

    使用 axios 拦截器拦截响应时无法获取某些响应头信息? 在使用 axios.interceptors.response.use 拦截响应时,你发现只能获取到部分响应头信息,而其他信息却无法获取,比如 Access-Token 属性。 这种情况通常发生在跨域请求中。当后端返回的响应头中没有包含 A…

    2025年12月19日
    000
  • 前端使用 Axios 拦截器获取不到后端响应头信息,如何解决?

    获取不到响应头信息的解决方案 前端使用 axios 拦截器获取后端响应头信息时,可能会遇到无法获取全部头信息的现象。这是因为在跨域请求中,后端需要在响应头中返回一个 access-control-expose-headers 头,来定义哪些头信息可以被前端访问。 具体解决方法如下: // 后端代码中…

    2025年12月19日
    000
  • Axios 拦截器无法获取所有 Headers 信息,如何解决?

    axios 拦截器获取 headers 信息受限的问题 在使用 axios 拦截器 axios.interceptors.response.use 获取响应头信息时,可能会遇到部分信息无法获取的情况。例如,以下代码仅打印出部分响应头数据: axiosinstance.interceptors.res…

    2025年12月19日
    000
  • 了解 HTTP 内部服务器错误:原因、解决方案和预防

    HTTP 500 内部服务器错误是访问网站时遇到的常见但令人沮丧的错误。此错误是服务器端问题,这意味着它是由托管网站的 Web 服务器而不是客户端浏览器内的问题引起的。当用户遇到 500 错误时,他们通常会看到一条通用消息,指出“出了问题”,但没有提供具体详细信息。本文将深入探讨 https://k…

    2025年12月19日
    000
  • 使用 GitHub Actions 为 VShell 实施 CI 管道

    介绍 本周,我深入研究了使用 github actions 设置持续集成 (ci) 管道,同时还扩展了我的项目 vshell 的单元测试套件。这个过程增强了我对 ci 原理、自动化测试以及帮助开发人员确保可靠代码交付的工具的理解。 什么是持续集成? 持续集成是一种开发实践,其中代码更改会自动测试并频…

    2025年12月19日
    000
  • React + AWS Cognito:电子邮件身份验证设置指南(第二部分)

    在上一篇文章中,我们处理了 aws 端的所有内容;现在让我们深入研究 react 来设置我们的代码。 aws 提供了 npm 包 @aws-sdk/client-cognito-identity-provider,其中包含以下功能: 使用电子邮件和密码创建帐户通过 aws 发送的代码验证电子邮件使用…

    好文分享 2025年12月19日
    000
  • Naive UI 上传组件中 file.name 显示 undefined 如何解决?

    解决 naive ui 上传组件中 file.name 显示 undefined 的问题 在使用 naive ui 的 upload 组件时,开发者可能会遇到 file.name 一直为 undefined 的问题。这可能会妨碍表单数据提交,因为它阻止了从上传文件中获取文件名以便附加到表单数据中。 …

    2025年12月19日
    000
  • JavaScript 原型链:为什么 fn.[[Prototype]].[[Prototype]].__proto__ 是 Fn.prototype?

    探索 [[Prototype]] 和 proto 的奥秘 在探索 JavaScript 原型链时,我们经常会遇到 proto 属性和 [[Prototype]] 内部插槽的概念。然而,它们之间的关系可能会让人感到困惑。 为什么 fn.[[Prototype]].[[Prototype]].__pro…

    好文分享 2025年12月19日
    000
  • 在 Nextjs App Router 中使用 Authjs 进行用户身份验证

    目录 初始设置 安装配置nextauthconfig 设置路由处理程序设置中间件在服务器端组件中获取会话在客户端组件中获取会话文件夹结构 实施身份验证:凭据和 google oauth 设置 prisma凭证添加 google oauth 提供商设置 google oauth 应用程序设置重定向 u…

    2025年12月19日 好文分享
    000
  • useContext:React Hooks

    react 中的 usecontext 和两个实用的迷你项目 介绍 在 react 中,管理组件之间的数据至关重要,尤其是在多个组件需要访问相同数据的大型应用程序中。 prop 钻取(将 props 传递到组件树的多个级别)很快就会变得很麻烦。这就是 react 的 usecontext hook …

    2025年12月19日
    000
  • 前端测试驱动开发 (TDD)

    测试驱动开发(tdd)因提高代码质量和减少软件开发中的错误而被广泛认可。虽然 tdd 在后端和 api 开发中很常见,但它在前端开发中同样强大。通过在实现功能之前编写测试,前端开发人员可以尽早发现问题,确保一致的用户体验并自信地进行重构。在本文中,我们将在前端开发的背景下探索 tdd,讨论它的好处,…

    2025年12月19日
    000
  • 测试数据生成器:提高软件测试效率

    在软件测试中,测试数据的准确性和一致性对于可靠的结果至关重要。然而,手动创建和管理测试数据非常耗时且经常容易出错,尤其是对于大型应用程序。这就是测试数据生成器派上用场的地方。测试数据生成器自动创建测试所需的数据,节省时间,减少手动错误,并确保测试过程尽可能无缝。这篇文章探讨了什么是测试数据生成器、为…

    2025年12月19日
    000
  • 了解 JavaScript 中的作用域和作用域链

    javascript 开发人员经常会遇到作用域、作用域链、词法环境和不同类型的作用域(全局作用域、函数作用域和局部作用域)等术语。这些概念对于理解变量和函数的行为方式、它们的可访问性以及 javascript 在执行代码时如何找到它们至关重要。在本博客中,我们将分解这些主题,以帮助您掌握 javas…

    2025年12月19日
    000
  • 如何js提交百度收录

    通过百度搜索资源平台开放接口,可直接提交网址收录。具体步骤如下:获取 access token。创建 submit_url 请求,指定 URL 和参数。发送请求,处理服务器响应。解析响应,获取提交状态和信息。 如何使用 JavaScript 代码提交百度收录 直接提交方法: 通过百度搜索资源平台的开…

    2025年12月19日
    000
  • 前端如何缓存js文件

    缓存 JS 文件可提升页面加载速度。缓存方法包括:1. 服务器端缓存:设置 HTTP 缓存头或使用 CDN;2. 浏览器端缓存:使用 localStorage/sessionStorage 或 Service Worker。最佳实践是设置合理的缓存时间,使用版本控制,以及压缩 JS 文件。 前端缓存…

    2025年12月19日
    000
  • 构建乐观更新的数据表

    介绍 今天,我将分享如何使用现代 react 模式构建一个精美的食品数据库管理系统。我们将专注于创建一个具有无缝乐观更新的响应式数据表,将 tanstack query(以前称为 react query)的强大功能与 mantine 的组件库相结合。 项目概况 要求 在数据表中显示食品添加新项目并立…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信