CORS google chrome 扩展有什么替代品吗?如何在不使用 CORS 的情况下发出成功的 ajax 请求? [英] Is there any alternative to CORS google chrome extension? How to make successful ajax request without using CORS?

问题描述

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

Hi I have build Udemy API that fetches the courses using React and axios. It works fine if the chrome has CORS extension turned on but otherwise it does not fetch the data.

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

I have already asked a question regarding this issue, please take a moment to read. I have tried all the solutions provided online.. Thanks

相关问题:无法加载资源.Access-Control-Allow-Origin 不允许 Origin

推荐答案

这个问题通常与后端服务器有关，但如果您没有访问服务器的权限那么您有两个选择

This problem usually related with the backend server, but if you don't have an access to the server so you have two options

首选使用此 Chrome 扩展程序:Allow-Control-Allow-Origin 但不幸的是，此扩展在其他浏览器中不可用，因此您需要使用

First option to use this chrome extension: Allow-Control-Allow-Origin but unfortunately this extension is not available in the other browsers so you need to use

第二个选项 使用在线 CORS 代理，如

Second option by using online CORS proxy like

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

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

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

CORS proxy is a free service for developers who need to bypass same-origin policy related to performing standard AJAX requests to 3rd party services.

这是使用 CORS 代理的 Axiox 调用示例

Here's an example of Axiox call using CORS proxy

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)，则它仅适用于此选项集.

I added withCredentials() it makes your browser include cookies and authentication headers in your XHR request. If your service depends on any cookie (including session cookies), it will only work with this option set.

有一个 Firefox 扩展，可将 CORS 标头添加到适用于 2015 年 3 月 5 日发布的最新 Firefox(内部版本 36.0.1)的任何 HTTP 响应查看此链接

There's a Firefox extension that adds the CORS headers to any HTTP response working on the latest Firefox (build 36.0.1) released March 5, 2015 Check out this link

希望对你有帮助

这篇关于CORS google chrome 扩展有什么替代品吗?如何在不使用 CORS 的情况下发出成功的 ajax 请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！