CORS issue with Forismatic API using axios and React

1

I’m redoing the random quote generator challenge using react instead and I seem to be getting a CORS issue when trying to connect to the API. Keep in mind I didn’t have any trouble using the same url when I did the project in jquery.

I’m trying to redo the Random Quote Generator challenge from freecodecamp using React. When I make an API request to Forismatic using axios, I can’t fetch any data.

A look into the browser console shows that I’m having a CORS issue. How do I get around this issue? Keep in mind, I did the exact same project using jQuery and didn’t have any problems connecting the API.

    const url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
        
        axios.get(url).then((data) => {
          
          console.log(data); // No response
        })

How do I get around this problem?

2

Hey drhectapus, It’s likely that your request with jQuery was considered a “simple request” and didn’t trigger a “CORS preflight.”

Now that you are using axios, the request may have a property that caused the issue. CORS is a sort of defense mechanism in the browser and on the server to prevent unauthorized requests to domains other than your current one.

What you will want to do is to be explicit in your API request by using the options available to you through axios. This will ensure that you maintain a “simple request.”

For example, one cause for CORS preflight according to the MDN docs: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

OR if the Content-Type header has a value other than the following:
application/x-www-form-urlencoded
multipart/form-data
text/plain

So you would change your axios call to make sure you have one of those content types. You have to modify your axios call to a format that allows you to pass in an “options” object like this:

axios({
   method:'GET',
   url:'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?',
   headers: {
     'Content-Type': 'application/x-www-form-urlencoded' 
   }
});

See if that does the trick. Otherwise you will need to analyze your request and compare its properties against the criteria in the MDN article to figure out how you’ve triggered the CORS preflight.

A quick note about the server side. It’s common to prohibit these types of requests for security reasons and you can see why - PUT and DELETE by unathenticated/unauthorized users. On the server side, you can allow CORS by adding this to the header response object: ‘Access-Control-Allow-Origin’: ‘*’

Hope this helps!

3

So I pasted of code into my project:

axios({
       method:'GET',
       url:'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?',
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
       }
    }).then((data) => {
     console.log(data);
   });

and it’s still not working :frowning:
Here’s my codepen for reference: https://codepen.io/drhectapus/pen/vmKObZ?editors=0111

4

Axios doesn’t support jsonp, but there is a way to add it from this cookbook.