Question

您好我已经构建了使用React和axios获取课程的Udemy API。如果Chrome启用了CORS扩展，但它无法获取数据，它可以正常工作。

我已经就此问题提出了一个问题，请花一点时间阅读。我已经尝试了在线提供的所有解决方案..谢谢

相关问题： Failed to load resource. Origin is not allowed by Access-Control-Allow-Origin

Answer 1

此问题通常与后端服务器有关，但如果您无法访问服务器，那么您有两个选项

第一个选项使用此Chrome扩展程序：Allow-Control-Allow-Origin但很遗憾，此扩展程序在其他浏览器中不可用，因此您需要使用

使用在线CORS代理

，

第二个选项

https://cors-anywhere.herokuapp.com/http://example.com

http://cors-proxy.htmldriven.com/?url=http://www.htmldriven.com/sample.json

CORS代理是一项免费服务，适用于需要绕过与向第三方服务执行标准AJAX请求相关的同源策略的开发人员。

以下是使用CORS代理进行Axiox调用的示例

const urlProxy = 'https://cors-anywhere.herokuapp.com/http://example.com';
export function post() {
    let users = {
        username: '',
        password: '',
    };
    return axios({
            method:'POST',
            url:urlProxy,
            data: users, // Delete it if you dont have a data
            withCredentials: true, // Delete it if your request doesn't required credentials
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
                'Origin': '*',
                'Access-Control-Allow-Headers': '*',
                'Access-Control-Allow-Origin': '*',
            }
        })

            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            })
}

我添加了withCredentials()它使您的浏览器在您的XHR请求中包含Cookie和身份验证标头。如果您的服务依赖于任何cookie（包括会话cookie），它将仅适用于此选项集。

有一个 Firefox 扩展程序，可将CORS标头添加到2015年3月5日发布的最新Firefox（版本36.0.1）上的任何HTTP响应中 Check out this link

希望这会对你有所帮助

Answer 2

您还可以尝试使用扩展名ModHeader添加CORS响应标头，该标头同时支持Chrome和Firefox（免责声明：我是作者），但我认为问题出在您的后端。您确实需要在后端启用CORS才能正常工作。使用代理服务器也可以，但是这只是额外的开销（会有很小的性能损失，更多的故障点等）

Answer 3

这是完美的Chrome扩展程序。

Moesif Orign & CORS Changer

Allow CORS: Access-Control-Allow-origin

有没有CORS谷歌Chrome扩展的替代品？如何在不使用CORS的情况下成功获取ajax请求？

3 个答案: