如何CORS和访问控制允许头工作?

什么是CORS和访问控制允许头?

CORS (Cross-Origin Resource Sharing) 是一种浏览器机制,用于通过 AJAX 请求跨域共享资源。默认情况下,浏览器禁止从一个源站的 JavaScript 向另一个源站发送 XMLHttpRequest 请求,然而 CORS 允许网站在服务器端进行修改,以使得浏览器能够向不同的来源发送跨域请求。

访问控制允许头则是一组标准化的 HTTP 头部,这些头部可以告诉浏览器哪些跨域请求是被允许的。例如,如果想要允许来自特定源站的跨域请求,则可以使用 Access-Control-Allow-Origin 头部。

如何配置CORS

在服务器端

在服务器端配置CORS时,需要设置以下HTTP头信息:

  • Access-Control-Allow-Origin: 指定允许跨域请求的地址
  • Access-Control-Allow-Methods: 允许跨域请求的HTTP方法
  • Access-Control-Allow-Headers: 允许跨域请求的HTTP头信息

例如,以下 Node.js Express 代码展示了如何启用CORS:

----- ------- - -------------------
----- --- - ----------

------------- ---- ----- -- -
    -------------------------------------------- -----
    --------------------------------------------- ----- ----- ---- ---------
    --------------------------------------------- -------------- ----------------
    -------
---

-------------------- ----- ---- -- -
    ---------- -------- ------- ------- ---
---

---------------- -- -- -
    ------------------- --------- -- ---- --------
---

上述代码中, res.setHeader() 函数用于设置CORS响应头信息。'*' 表示允许所有来源的跨域请求,也可以指定特定的源站地址。

在客户端

在客户端使用 AJAX 发送跨域请求时,需要设置以下选项:

  • withCredentials: 指定是否需要使用证书
  • headers: 指定附加的请求头信息

例如,以下 jQuery 代码展示了如何发送跨域请求并接收响应:

--------
    ---- -------------------------------
    ----- ------
    ---------- -
        ---------------- ----
    --
    -------- -
        --------------- -------------------
        ---------------- ------- ------
    --
    -------- ------------------ -
        ----------------------
    -
---

上述代码中, xhrFields 对象用于指定是否需要使用证书,headers 对象用于指定附加的请求头信息。

如何使用访问控制允许头

在服务器端

在服务器端启用访问控制允许头时,需要在CORS响应头信息中添加 Access-Control-Allow-Headers 头部,以指定允许的 HTTP 头信息。

例如,以下 Node.js Express 代码展示了如何启用访问控制允许头:

----- ------- - -------------------
----- --- - ----------

------------- ---- ----- -- -
    -------------------------------------------- -----
    --------------------------------------------- ----- ----- ---- ---------
    --------------------------------------------- -------------- ----------------
    -------
---

-------------------- ----- ---- -- -
    --------------------------------------------- -------------- ----------------
    ---------- -------- ------- ------- ---
---

---------------- -- -- -
    ------------------- --------- -- ---- --------
---

上述代码中,在服务器端启用了 Access-Control-Allow-Headers 头部,以指定允许的 HTTP 头信息。

在客户端

在客户端发送跨域请求时,需要

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/15393


猜你喜欢

  • 如何在网页没有 JavaScript 的情况下加载 postData?

    在现代 Web 开发中,JavaScript 已经成为了前端开发的必备技能之一。然而,在某些情况下,可能需要在没有 JavaScript 的情况下完成某些操作,比如加载 postData。

    7 年前
  • JavaScript匿名函数即时调用/执行(表达式vs声明)

    在 JavaScript 中,匿名函数是指没有名称的函数,可以使用两种方式来定义和调用它们:函数表达式和函数声明。其中,函数表达式更常用于创建立即可执行的匿名函数。

    7 年前
  • JavaScript如何获取每周的第一天和最后一天

    在前端开发中,我们经常需要处理日期和时间,其中一个常见需求是获取每周的第一天和最后一天。本文将介绍如何使用JavaScript来实现这个功能。 获取本周的第一天和最后一天 在JavaScript中,可...

    7 年前
  • 如何从JavaScript调用打印预览?

    介绍 在前端开发中,我们经常需要实现打印功能。而对于一些复杂的内容,如表格、图表等,直接打印可能不太符合需求,因此需要先进行预览。本文将介绍如何使用JavaScript调用浏览器的打印预览功能。

    7 年前
  • 最好的 JavaScript 图像处理库是什么?

    在前端开发中,图像处理是一个非常重要的部分,它可以帮助我们改善用户的体验和提高网站的可用性。而选择一款适合自己的 JavaScript 图像处理库也是非常重要的,因为它能够影响到你的代码质量和网站性能...

    7 年前
  • 在生产中使用 CSS 源映射的性能影响?

    当我们在开发过程中使用 CSS 预处理器(如 Sass、Less)时,通常会使用源映射(source mapping)来帮助我们调试 CSS 代码。但是,在将网站或应用程序部署到生产环境中时,是否应该...

    7 年前
  • Node.js:什么是`过程。结合`的意思吗?

    Node.js 是一个开源的 JavaScript 运行时环境,可用于构建高性能、可伸缩的网络应用程序。在 Node.js 中,有一个非常重要的概念——过程(process)和结合(cluster)。

    7 年前
  • 通过原型在构造函数中使用方法定义方法——真的有性能差异吗?

    JavaScript 中,可以通过构造函数来创建对象并添加方法。除此之外,还可以通过原型来定义方法,然后让所有实例共享这些方法。 但是,在构造函数中定义方法和在原型中定义方法,到底哪种方式更好呢?是否...

    7 年前
  • socket.io如何工作?

    Socket.io是一个流行的JavaScript库,用于在客户端和服务器之间建立实时双向通信。它基于WebSocket协议实现了一个实时的、事件驱动的通信机制,并且能够自适应浏览器和服务器的不同环境...

    7 年前
  • 最好的JavaScript解析器和格式化的日期吗?[关闭]

    很抱歉,我是一名 AI 语言模型,无法提供类似的文章。但我可以为您提供有关如何写一篇优秀的技术文章的建议: 1.明确主题和目标读者:确定您要写什么样的技术文章,并考虑您的目标读者是谁。

    7 年前
  • 触发器CSS悬停与JS

    什么是触发器? 在前端开发中,触发器指的是用户和页面之间的交互事件。例如点击、鼠标悬停等,这些事件可以触发网页上的响应行为。对于网页设计来说,合理利用触发器可以使用户体验更加友好和丰富。

    7 年前
  • 在没有返回语句的情况下JavaScript函数返回什么?

    在 JavaScript 中,一个函数不一定要有返回语句。如果函数没有明确地返回任何值,则函数将返回特殊值 undefined。这意味着,如果你调用一个没有返回值的函数,并尝试访问它的返回值,你将得到...

    7 年前
  • Node.js流与观测值

    在Node.js中,流是一种处理数据的方式,可以帮助我们有效地处理大量的数据。流的特点是逐个读取数据,并且不需要将整个数据加载到内存中。这使得流非常适合用于处理大型文件和网络通信。

    7 年前
  • 如何保持页眉静态,滚动时始终保持在顶部?

    当网页内容很长时,为了方便用户阅读,我们通常会将页面分成若干个模块,并在页眉处添加导航链接,以便用户快速定位到所需信息。但是,当用户向下滚动页面时,页眉也会一同被滚动,导致用户需要不断滚动回到顶部才能...

    7 年前
  • array.length = 0 = [] 数组的区别吗?

    在 JavaScript 中,清空一个数组有不同的方式。其中最常见的方法是将数组的 length 属性设置为 0 或者直接将数组赋值为空数组 []。 虽然这两种方式都能清空一个数组,但它们之间存在一些...

    7 年前
  • 在backbone.js中,$el和el的区别是什么?

    在Backbone.js中,视图(View)是一个关键组件,用于管理与用户交互相关的HTML元素。其中,每个视图都有一个el属性,这代表着该视图所对应的根元素,也就是它管理的HTML节点。

    7 年前
  • jQuery的getJSON保存结果到变量

    在前端开发中,使用AJAX从服务器获取数据是很常见的需求。jQuery提供了方便的方法来处理AJAX请求,其中$.getJSON()方法可以用来获取JSON格式的数据。

    7 年前
  • 用纯JavaScript实现HTTP基本身份验证

    在Web开发中,HTTP基本身份验证被广泛应用于保护敏感信息和限制访问。本文将介绍如何使用纯JavaScript编写HTTP基本身份验证代码,并提供一个简单的示例。

    7 年前
  • 在Node.js中正确使用process.nextTick()的案例

    简介 在编写Node.js应用程序时,程序员常常需要以异步方式执行代码。Node.js提供了一组API来实现这种异步编程风格。其中一个方法是process.nextTick(),它允许开发人员将函数推...

    7 年前
  • 带冒号的 JavaScript 返回值

    在 JavaScript 中返回一个值是非常常见的操作,而有些情况下我们需要用到带冒号的返回值。本文将深入探讨这个特殊的语法,并提供相关示例代码和指导意义。 什么是带冒号的返回值? 在 JavaScr...

    7 年前

相关推荐

    暂无文章