CORS 谷歌浏览器扩展有啥替代品吗？如何在不使用 CORS 的情况下成功发出 ajax 请求？

Posted 2023-02-27

【中文标题】CORS 谷歌浏览器扩展有啥替代品吗？如何在不使用 CORS 的情况下成功发出 ajax 请求？

【英文标题】：Is there any alternative to CORS google chrome extension? How to make successful ajax request without using CORS?CORS 谷歌浏览器扩展有什么替代品吗？如何在不使用 CORS 的情况下成功发出 ajax 请求？

【发布时间】：2018-08-03 01:36:18

【问题描述】：

您好，我已经构建了使用 React 和 axios 获取课程的 Udemy API。如果 chrome 开启了 CORS 扩展，它可以正常工作，否则它不会获取数据。

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

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

【问题讨论】：

代理。对服务器的 Ajax 请求 -> 对 API 的 HTTP 请求 -> 在 ajax 请求中从 API 返回结果。

你能说得更具体些吗？我可以发送带有客户 ID 和密码的请求。它的工作。问题是没有CORS它不起作用。我在 Firefox 中收到此错误：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at udemy.com/api-2.0/courses/…。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

我刚试过这个，它有效。它在下面的这个线程中提供。我可以在生产中使用它吗？请分享你的意见。 ***.com/a/46774307/5616553

你的后端服务器是什么？

我正在使用 Udemy api。他们给了我客户 ID 和密码。

【参考方案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

希望对你有帮助

【讨论】：

感谢 cors heroku 应用程序。我正在使用它，这是唯一的方法。否则我永远无法上线 :) 我很想知道它是否有任何副作用、性能问题等。无论如何，很棒的工作！

No AFAICT，我已经使用了一段时间，没有任何问题。

所有链接都坏了

【参考方案2】：

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

【参考方案3】：

这是完美运行的 Chrome 扩展。

Moesif Orign & CORS Changer

Allow CORS: Access-Control-Allow-origin