解决跨域请求text/html响应:JavaScript访问第三方网站的正确姿势

解决跨域请求text/html响应:javascript访问第三方网站的正确姿势

本文旨在解决JavaScript在浏览器环境中跨域请求第三方网站,特别是当目标网站返回text/html类型数据时遇到的CORB(Cross-Origin Read Blocking)问题。文章将解释CORB产生的原因,并提供一种通过服务器端代理解决该问题的方案,避免直接在客户端暴露敏感信息和绕过浏览器的安全限制。

理解跨域资源共享 (CORS) 和 CORB

在Web开发中,由于浏览器的同源策略,JavaScript代码通常无法直接访问来自不同源(协议、域名或端口不同)的资源。CORS(Cross-Origin Resource Sharing)是一种机制,允许服务器声明哪些来源的网页可以访问其资源。如果服务器没有明确允许跨域访问,浏览器会阻止客户端JavaScript代码读取响应内容。

CORB(Cross-Origin Read Blocking)是浏览器的一种安全机制,用于阻止跨域读取某些类型的响应,例如text/html,以防止潜在的安全漏洞,例如跨站脚本包含(XSSI)攻击。 当浏览器检测到跨域请求返回text/html内容时,并且服务器没有设置适当的CORS头,CORB就会阻止JavaScript访问响应体。

问题分析:为何直接使用JavaScript请求失败?

直接在JavaScript中使用$.ajax或其他方式请求https://pubmed.ncbi.nlm.nih.gov/?term=hello这类返回text/html的URL,并且没有正确配置CORS的服务器,会导致以下问题:

立即学习“Java免费学习笔记(深入)”;

Access-Control-Allow-Origin缺失: 目标服务器没有设置Access-Control-Allow-Origin头,或者设置的值不允许当前域访问。CORB阻止: 即使请求成功(状态码200),浏览器也会阻止JavaScript读取响应内容,因为CORB认为text/html内容可能包含敏感信息,直接暴露给跨域脚本存在安全风险。dataType: “jsonp” 的误用: JSONP 是一种古老的跨域技术,它依赖于动态创建 标签,并且要求服务器返回特定格式的 JSON 数据,包裹在一个回调函数中。 pubmed.ncbi.nlm.nih.gov 显然不是为 JSONP 设计的,所以使用 dataType: “jsonp” 不会解决问题,反而可能引入更多问题。

解决方案:使用服务器端代理

解决此类跨域问题的最佳实践是使用服务器端代理。这意味着你的JavaScript代码向你的服务器发送请求,然后你的服务器再代表客户端向目标服务器发送请求,并将响应转发回客户端。 这样可以绕过浏览器的同源策略,因为所有的跨域请求都发生在服务器端。

步骤如下:

客户端 (JavaScript):

%ignore_pre_1%

服务器端 (Node.js 示例):

%ignore_pre_2%

代码解释:

express 是一个流行的 Node.js Web 框架,用于创建服务器。axios 是一个基于 Promise 的 HTTP 客户端,用于发送 HTTP 请求。cors 是一个用于处理 CORS 问题的中间件。 app.use(cors()); 允许来自所有域的请求。 在生产环境中,你应该配置 cors 以仅允许来自你的客户端域的请求。/api/pubmed 是服务器端代理的路由。服务器接收客户端的请求,构造目标 URL,使用 axios 发送 GET 请求,并将目标网站的响应数据直接返回给客户端。错误处理:如果请求失败,服务器会返回 500 错误。

注意事项:

安全性: 在生产环境中,请确保对代理请求进行适当的身份验证和授权,以防止未经授权的访问。CORS配置: 如果你的服务器和客户端部署在不同的域上,你需要配置服务器的 CORS 头,允许你的客户端域访问。 使用 cors 中间件可以简化此过程。错误处理: 在服务器端添加适当的错误处理,以处理请求失败的情况。数据处理: 根据实际需求,在服务器端对响应数据进行处理,例如提取所需的信息,转换数据格式等。性能: 如果代理的流量很大,可以考虑使用缓存来提高性能。

总结

直接在客户端JavaScript中跨域请求text/html类型的资源通常会受到浏览器的安全限制。 使用服务器端代理是一种安全且可靠的解决方案。 通过在服务器端发送请求并将响应转发回客户端,可以绕过浏览器的同源策略和CORB限制。 在实际应用中,请务必注意安全性、CORS配置、错误处理和性能优化。

以上就是解决跨域请求text/html响应:JavaScript访问第三方网站的正确姿势的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 12:56:33
下一篇 2025年12月20日 12:56:42

相关推荐

  • 解决JavaScript跨域请求text/html类型API的CORB问题

    本文旨在帮助开发者解决在使用JavaScript进行跨域请求时,由于目标网站返回的Content-Type为text/html而引发的CORB(Cross-Origin Read Blocking)问题。我们将深入探讨CORB的原理,并提供一种有效的解决方案,即通过服务器端代理来绕过浏览器的跨域限制…

    2025年12月20日
    000
  • 基于 Mantine UI 构建组件库时 useContext 报错的解决方案

    本文档旨在解决在使用 Mantine UI 构建可复用组件库并在其他项目中引入时,遇到的 TypeError: Cannot read properties of null (reading ‘useContext’) 错误。该错误通常与模块编译方式有关。通过修改 TypeS…

    2025年12月20日
    000
  • 使用正则表达式从字符串中提取数字(排除负数)

    本文介绍了如何使用 JavaScript 正则表达式从字符串中提取正数,包括整数、小数和分数,并排除负数。通过使用否定前瞻断言,可以有效地过滤掉以负号或小数点开头的数字,确保提取结果的准确性。文章提供了详细的正则表达式解释和示例代码,帮助读者理解和应用该技术。 正则表达式详解 要从字符串中提取正数,…

    2025年12月20日
    000
  • Mantine UI组件库:解决useContext错误与ESM模块编译策略

    本文深入探讨了在开发基于Mantine的React组件库并发布为npm包时,遇到的TypeError: Cannot read properties of null (reading ‘useContext’)错误。该问题通常源于组件库在构建时未正确配置为ESM模块输出,导致…

    2025年12月20日
    000
  • JavaScript事件处理:获取被点击元素的ID

    本文详细介绍了如何在JavaScript中准确获取被点击元素的ID。针对常见的错误用法,如在事件处理函数中直接使用document.getElementById(this),文章阐明了其原因,并提供了两种推荐的解决方案:通过事件属性传递this引用,以及使用现代的addEventListener方法…

    2025年12月20日
    000
  • 正则表达式进阶:从字符串中精确提取正数(含小数与分数)

    本教程详细阐述了如何使用正则表达式从复杂字符串中精确提取正数,包括整数、小数和分数,同时有效排除负数。通过引入负向先行断言(Negative Lookbehind),我们能够构建一个健壮的正则表达式模式,确保只匹配符合特定条件的正数值,并提供实际代码示例和注意事项,帮助读者掌握高级正则匹配技巧。 理…

    2025年12月20日
    000
  • WebRTC屏幕录制中鼠标轨迹与视频帧同步的最佳实践

    本文探讨了在WebRTC屏幕录制过程中,如何精确同步鼠标移动轨迹与视频帧的挑战与解决方案。鉴于无法直接获取视频帧事件,我们提出了一种基于时间戳的同步策略,通过在录制开始时启动计时器,并结合requestAnimationFrame捕获鼠标位置及其相对时间戳,实现鼠标数据与视频流的有效解耦与后端重构,…

    2025年12月20日
    000
  • 纯JavaScript实现高效网页反向滚动教程

    本教程详细介绍如何使用原生JavaScript高效实现网页反向滚动功能。针对传统jQuery或不当脚本导致的性能问题,我们利用wheel事件和scrollBy方法,结合preventDefault()和passive: false选项,提供了一个简洁、流畅且兼容性良好的解决方案。文章还讨论了平滑滚动…

    2025年12月20日
    000
  • JavaScript中高效判断字符串是否包含特定关键词

    本文探讨在JavaScript中如何高效准确地判断一个字符串是否包含特定关键词。针对常见的String.prototype.includes()方法误用,我们将深入分析其正确用法,并提供一个健壮的解决方案,实现不区分大小写的关键词检测,确保即使关键词是目标字符串的一部分也能被正确识别。 String…

    2025年12月20日
    000
  • JavaScript条件逻辑与函数返回值:修复“石头剪刀布”游戏中的常见错误

    本教程旨在解决JavaScript“石头剪刀布”游戏中常见的逻辑错误,特别是函数未返回预期值导致的问题,以及if-else语句中else条件分支的错误使用。通过纠正getPlayerChoice函数的返回值和优化条件判断结构,我们将确保游戏逻辑的正确执行,避免意外结果,并提升代码的健壮性与可读性。 …

    2025年12月20日
    000
  • JavaScript 递归构建 JSON 树形结构

    本文介绍如何使用 JavaScript 递归地构建 JSON 树形结构。通过将扁平化的数据转换为嵌套的树形结构,可以更方便地表示层级关系,并在前端界面中进行展示。本文将提供详细的代码示例,并解释关键步骤和注意事项,帮助你理解并掌握递归构建 JSON 树的方法。 递归构建 JSON 树 在 JavaS…

    2025年12月20日
    000
  • 获取Xero工资单列表的完整指南

    本文将指导开发者如何通过Xero Payroll API获取工资单列表。由于Xero API不支持直接获取所有工资单的列表,需要组合使用Payruns端点和Payslip端点。以下是详细步骤和注意事项,帮助开发者高效地集成Xero工资单数据。 步骤一:获取Payruns列表 首先,需要调用Payru…

    2025年12月20日
    000
  • 使用 Tailwind CSS 离线开发指南

    Tailwind CSS 是一款流行的实用优先的 CSS 框架,但有时我们可能需要在没有互联网连接的环境中使用它。本文将介绍如何在离线环境下使用 Tailwind CSS,包括下载完整 CSS 文件、集成到项目以及注意事项。 下载完整的 Tailwind CSS 文件 首先,你需要下载完整的 Tai…

    2025年12月20日
    000
  • 使用 Tailwind CSS 离线开发:完整指南

    本文旨在指导开发者如何在没有网络连接的情况下,使用 Tailwind CSS 进行项目开发。我们将介绍如何下载完整的 Tailwind CSS 文件,并将其集成到你的项目中,确保即使在离线环境下也能正常使用 Tailwind CSS 的全部功能。 离线使用 Tailwind CSS 的方法 在某些情…

    2025年12月20日
    000
  • Google Apps Script 中跨函数共享变量的正确方法

    在 Google Apps Script (GAS) 中,跨函数共享变量时,你可能会遇到变量值意外重置的问题。这是因为 GAS 的执行模型将每次函数调用视为一个独立的执行环境。这意味着,即使你在一个函数中修改了全局变量,当另一个函数被调用时,该全局变量会被重新初始化,导致之前所做的修改丢失。 问题根…

    2025年12月20日
    000
  • Google Apps Script 中跨函数引用变量的正确方法

    在 Google Apps Script (GAS) 开发 Google Workspace 插件时,经常会遇到需要在不同函数间共享和修改变量的情况。然而,GAS 的执行机制与传统的 JavaScript 有所不同,直接使用全局变量可能无法达到预期的效果。这是因为每次函数调用都被视为独立的执行,全局…

    2025年12月20日
    000
  • 使用 Tailwind CSS 离线环境搭建教程

    本文旨在提供一套在无网络环境下使用 Tailwind CSS 的完整解决方案。通过预先下载 Tailwind CSS 核心文件,并配置项目环境,即使在离线状态下,也能实现 Tailwind CSS 的编译和使用,从而保证开发流程的顺畅进行。 离线使用 Tailwind CSS 的步骤 在网络环境不稳…

    2025年12月20日
    000
  • JavaScript 中合并两个对象数组并处理缺失属性

    本文介绍了如何使用 JavaScript 合并两个对象数组,并为缺失的属性添加 null 值。通过构建一个包含所有属性的集合,并创建一个带有 null 值的样本对象,最终实现数据的完整合并。 在实际开发中,我们经常会遇到需要合并多个数据源的情况。例如,一个数组包含用户 ID 和分数,另一个数组包含用…

    2025年12月20日
    000
  • 合并具有不同属性的对象数组并填充缺失值

    本文档旨在提供一种通用的解决方案,用于合并两个包含不同属性的对象数组。合并过程中,如果某个对象缺少另一个对象中的属性,则使用 null 值进行填充,最终生成一个包含所有对象和属性的统一数组。我们将详细介绍实现步骤,并提供可直接运行的 JavaScript 代码示例。 问题背景 在实际开发中,我们经常…

    2025年12月20日
    000
  • 合并两个对象数组并为不存在的属性添加空值

    本教程旨在指导开发者如何合并两个包含不同属性的对象数组,并为缺失的属性填充 null 值。通过动态构建属性列表和使用对象合并技术,最终生成一个包含所有对象信息且结构统一的结果数组。本文将提供详细的代码示例和步骤说明,帮助你理解并实现该功能。 问题背景 在实际开发中,我们经常会遇到需要合并来自不同数据…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信