如何修复：谷歌浏览器的 CORB 块（Axios 请求）

Posted 2023-03-04

【中文标题】如何修复：谷歌浏览器的 CORB 块（Axios 请求）

【英文标题】：How to fix: CORB block for google chrome (Axios request)

【发布时间】：2019-11-22 16:13:50

【问题描述】：

我正在使用带有 Rest 框架和 React 的 Django 来调用这个 API url。

我已经启用了 CORS，但是，axios 请求仍然被 CORB 阻止。

还尝试通过使用以下命令行标志启动 Chrome 来暂时禁用它：

--disable features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

代码如下：

    componentDidMount() 
    const articleID = this.props.match.params.articleID;
    axios.get(`http://127.0.0.1:8000/api/$articleID`, 
        headers: 
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Content-Type': 'application/json',
            'X-Content-Type-Options': 'nosniff'
        
    ).then(res => 
        this.setState(
            article: res.data
        );
        console.log(`http://127.0.0.1:8000/api/$articleID`);
        //console.log(res.data);
    );

这是错误

警告： 跨域读取阻止 (CORB) 阻止了具有 MIME 类型 application/json 的跨域响应 http://127.0.0.1:8000/api/1。

【参考方案1】：

如何击败 CORB 并允许 javascript 通过 XHR 访问在 localhost (127.0.0.1) 上运行的本地 Web 服务器：

选择一个随机域并将其指向 HOSTS 文件中的 127.0.0.1 将您的 XHR 连接定向到该域而不是 127.0.0.1 您需要在本地 Web 服务器上启用 SSL/TLS。 a) 如果您在 C 中编写自己的套接字服务器，here 是关于如何启用 SSL 的指南。 b) 或者您可以将简单的本地服务器建立在支持 SSL/TLS 的轻量级 Web 服务器上：abyssws 我选择了这个更快的解决方案，并让它通过我现有的逻辑将文件动态转储到特定的文档路径下服务器的根目录。 您需要确保本地服务器的响应始终包含此 CORS 标头：Access-Control-Allow-Origin: *

它现在应该可以工作了。

【参考方案2】：

已解决：在我的 chrome 浏览器中添加了 Allow-Control-Allow-Origin 扩展程序并指定了 URL 模式。例如，localhost:8000/* 和http://127.0.0.1:8000/* 应该能够连接。如果出现 CORB 错误，除了为我禁用 chrome 浏览器安全性之外别无他法:(