Question

我将Django与Rest框架和React结合使用，以对此API网址进行调用。

我已经启用了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。

Answer 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: *

现在应该可以正常工作了。

Answer 2

已解决：向我的Chrome浏览器添加了Allow-Control-Allow-Origin扩展名和指定的URL模式。例如，localhost：8000 / *和http://127.0.0.1:8000/ *应该可以连接。如果出现CORB错误，除了为我禁用Chrome浏览器安全性外，别无其他方法:(

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

2 个答案: