时间戳

首页 > 解决方案 > 如何修复：谷歌浏览器的 CORB 块（Axios 请求）

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

问题描述

我正在使用带有 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 。

标签： djangoreactjsgoogle-chromecorsaxios

解决方案

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

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

它现在应该可以工作了。

推荐阅读