Is there any alternative to CORS google chrome ext

问题:

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

Related issue: Failed to load resource. Origin is not allowed by Access-Control-Allow-Origin

回答1:

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

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

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 proxy is a free service for developers who need to bypass same-origin policy related to performing standard AJAX requests to 3rd party services.

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);
            })
}

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.

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

Hope this will help you

回答2:

You can also try using ModHeader extension to add CORS response headers, which supports both Chrome and Firefox (Disclaimer: I am the author), but I think the problem is with your backend. You really need to enable CORS in your backend for this to work properly. Using a proxy will also works, but that is just an extra layer of overhead (there will be small performance penalty, more points of failure, etc.)

回答3:

Here is Chrome Extention which work perfectly.

Moesif Orign & CORS Changer

Allow CORS: Access-Control-Allow-origin