本文旨在帮助开发者解决在使用JavaScript进行跨域请求时，由于目标网站返回的Content-Type为text/html而引发的CORB（Cross-Origin Read Blocking）问题。我们将深入探讨CORB的原理，并提供一种有效的解决方案，即通过服务器端代理来绕过浏览器的跨域限制，从而成功获取API的响应数据。
跨域资源共享(CORS)与跨域读取阻止(CORB)
在Web开发中，由于浏览器的同源策略限制，JavaScript通常无法直接从与当前页面不同源的服务器请求资源。CORS（Cross-Origin Resource Sharing）是一种机制，允许服务器声明哪些来源（域、协议和端口）有权访问其资源。服务器通过设置Access-Control-Allow-Origin响应头来控制跨域访问。
然而，即使服务器没有明确禁止跨域访问，浏览器也可能出于安全考虑，阻止某些类型的跨域响应。这就是CORB（Cross-Origin Read Blocking）的作用。CORB是一种安全机制，旨在防止恶意网站读取敏感的跨域数据。它主要针对text/html、text/plain和application/xml等MIME类型，因为这些类型的数据可能包含敏感信息，例如HTML片段或XML数据。
问题分析：为何text/html会导致CORB？
当浏览器检测到跨域请求的响应类型为text/html，并且服务器没有正确设置CORS头时，CORB会阻止JavaScript读取响应内容。这是因为浏览器认为直接将HTML内容暴露给JavaScript可能存在安全风险，例如XSS（Cross-Site Scripting）攻击。
立即学习“Java免费学习笔记（深入）”；
在您提供的案例中，尽管使用了dataType: "jsonp"和设置了Access-Control-Allow-Origin': '*'，但问题仍然存在。这是因为：
- Access-Control-Allow-Origin 是服务器响应头，而非客户端请求头。客户端设置此header没有意义。
- dataType: "jsonp" 期望服务器返回 JSONP 格式的数据。 JSONP 是一种利用
解决方案：服务器端代理
由于浏览器端的限制，直接使用JavaScript跨域请求text/html类型的API通常不可行。最可靠的解决方案是在服务器端创建一个代理。
原理：
- 您的JavaScript代码向您自己的服务器发送请求。
- 您的服务器接收到请求后，使用服务器端代码（例如Node.js、Python、Java等）向目标API (https://pubmed.ncbi.nlm.nih.gov/?term=hello) 发送请求。
- 您的服务器接收到目标API的响应后，可以根据需要对数据进行处理（例如，提取所需信息），然后将处理后的数据返回给您的JavaScript代码。
示例 (Node.js)：
const express = require('express');
const axios = require('axios');
const cors = require('cors'); // Import the cors middleware
const app = express();
const port = 3000;
// Enable CORS for all origins
app.use(cors());
app.get('/api/pubmed', async (req, res) => {
try {
const response = await axios.get('https://pubmed.ncbi.nlm.nih.gov/?term=hello');
// You can process the response data here if needed
res.send(response.data);
} catch (error) {
console.error(error);
res.status(500).send('An error occurred');
}
});
app.listen(port, () => {
console.log(`Proxy server listening at http://localhost:${port}`);
});前端JavaScript代码：
注意事项：
- 安全性： 请确保您的服务器端代理采取了必要的安全措施，例如输入验证和输出编码，以防止安全漏洞。
- CORS配置： 在服务器端，您需要配置CORS，允许您的前端应用程序访问代理API。在上面的Node.js示例中，使用了cors中间件来允许所有来源的访问。在生产环境中，您应该限制允许的来源。
- 数据处理： 您可能需要对从目标API获取的数据进行处理，例如提取所需信息或将其转换为更易于使用的格式。
- 错误处理： 完善的错误处理机制至关重要。确保您的服务器端代码能够处理各种错误情况，例如网络错误、API错误等。
- 性能： 如果您需要处理大量的请求，请考虑使用缓存机制来提高性能。
总结：
通过服务器端代理，您可以绕过浏览器的跨域限制，成功获取text/html类型API的响应数据。这种方法不仅解决了CORB问题，还提供了更大的灵活性和控制权，您可以根据需要对数据进行处理和转换。始终牢记安全性，并采取适当的措施来保护您的应用程序免受潜在的安全风险。
