本文旨在帮助开发者解决在使用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 是一种利用 标签的跨域请求技术，它要求服务器将数据包裹在一个回调函数中返回。如果服务器没有返回 JSONP 格式的数据，请求就会失败。而pubmed.ncbi.nlm.nih.gov返回的是text/html，所以无法使用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 middlewareconst app = express();const port = 3000;// Enable CORS for all originsapp.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代码：
function makeRequest() { const apiUrl = 'http://localhost:3000/api/pubmed'; // URL of your proxy server $.ajax({ url: apiUrl, type: 'GET', success: function(response) { console.log(response); // Process the HTML response here }, error: function(xhr, status, error) { console.error('Request failed with status code ' + xhr.status); } }); } // Make the request makeRequest();
注意事项：
安全性： 请确保您的服务器端代理采取了必要的安全措施，例如输入验证和输出编码，以防止安全漏洞。CORS配置： 在服务器端，您需要配置CORS，允许您的前端应用程序访问代理API。在上面的Node.js示例中，使用了cors中间件来允许所有来源的访问。在生产环境中，您应该限制允许的来源。数据处理： 您可能需要对从目标API获取的数据进行处理，例如提取所需信息或将其转换为更易于使用的格式。错误处理： 完善的错误处理机制至关重要。确保您的服务器端代码能够处理各种错误情况，例如网络错误、API错误等。性能： 如果您需要处理大量的请求，请考虑使用缓存机制来提高性能。
总结：
通过服务器端代理，您可以绕过浏览器的跨域限制，成功获取text/html类型API的响应数据。这种方法不仅解决了CORB问题，还提供了更大的灵活性和控制权，您可以根据需要对数据进行处理和转换。始终牢记安全性，并采取适当的措施来保护您的应用程序免受潜在的安全风险。
以上就是解决JavaScript跨域请求text/html类型API的CORB问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520015.html
微信扫一扫 
支付宝扫一扫 
