Is there any alternative to CORS google chrome extension? How to make successful ajax request without using CORS?

Question

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

Is there any other way to achieve this without using the extension?

Thanks!

Answer 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

Answer 2

Ideally, the CORS Issues should be handled on the server. So your server tells whether the API or any other resource can be consumed on a particular domain.

In this case, since you are using the Udemy APIs (most likely it’s an external server without CORS enabled), you will have to rely on a Chrome Extension that can add/remove/modify HTTP response headers.

You can try using Requestly - An Open-Source Chrome Extension to modify HTTP headers and define a rule like this

You can import this rule from the link, but remember to update the target URL and the header value based on your setup. You can also use localhost here in case you are debugging locally

Answer 3

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.)

Answer 4

Here is Chrome Extention which work perfectly.

Moesif Orign & CORS Changer

Allow CORS: Access-Control-Allow-origin