4

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

Ryan Dhungel
  • 2,674
  • 3
  • 17
  • 22
  • A proxy. Ajax request to your server -> HTTP request to API -> return result from API in ajax request. – Musa Feb 23 '18 at 03:08
  • can you please be more specific? I can send request with client id and password. its working. the problem is without CORS it does not work. I get this error in firefox: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.udemy.com/api-2.0/courses/?page=1&page_size=100&search=Web%20Development&price=price-free. (Reason: CORS header 'Access-Control-Allow-Origin' missing). – Ryan Dhungel Feb 23 '18 at 03:11
  • I just tried this and it works. It is provided in this thread below. can i use it in production? plz share your opinion. https://stackoverflow.com/a/46774307/5616553 – Ryan Dhungel Feb 23 '18 at 03:15
  • What's your backend server? – Liam Feb 23 '18 at 03:16
  • Im using Udemy api. They have given me client id and secret. – Ryan Dhungel Feb 23 '18 at 03:17

3 Answers3

7

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

Liam
  • 5,261
  • 5
  • 20
  • 45
0

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

Hao Nguyen
  • 11
  • 2
0

Here is Chrome Extention which work perfectly.

Moesif Orign & CORS Changer

Allow CORS: Access-Control-Allow-origin

dipenparmar12
  • 2,318
  • 1
  • 25
  • 34