Random Quote Project CORS problem

JavaScript
1

I have been trying to retrieve the quotes from an API https://api.forismatic.com/api/jsonp/ .
I am using Fetch Web API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch to send get request and retrieve the quote.
But I am getting a CORS error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.google.com/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Also there are various version of CORS error popping up. I don’t understand the CORS concept, and the fetch documentation does not give any idea as to how to overcome it. there is a lot of theory but no proper example.

So I would like to ask your help for retrieving quotes from the api using fetch.
Also if possible I would like to ask the writers to write about this problem in a more layman terms.
Thank you.

2

For development you could use a cors proxy:

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

3

Is this the standard way of doing things? Will i use the same app in production environment? If no then please provide a generic and standard way to interact with API

4

I ran into this issue on the Calculator Project when I attempted to integrate in the Wolfram Alpha API. The issue is that either the page or the browser (more likely) is not allowing a request to go out from the page unless it’s to the same domain/has it’s CORS headers configured to allow it. There are some quote sites that allow it but many don’t.

Personally, I think it’s an issue that FCC should note when starting the heavier front-end projects. When I posed the question, the response I got was that this sort of thing should probably be handled by the back-end. You’d configure the ‘Submit’ button to send a GET request to your app’s server. The server would then send out a request to the API to obtain the data, which it would then send back to the user. That way the user’s browser is sending requests to the same domain. This sort of setup happens a lot in the final few projects of the Information Security And Quality Assurance projects (like the Stock Price Checker & Anonymous Message Board).

Not that it’s probably what you wanted, but Quotes On Design has an API that worked for me on the Random Quote Project. I was not using fetch but the the generic JQuery AJAX function.

5

The right way is not to use a proxy…
but google is ur best friend… u dont give much details to help u.

6

Googling a thing makes easy try other way too man .
Good luck :sunglasses::sunglasses:

7

I tried XMLHttpRequest which gives CORS, tried fetch which gives CORS and now I am working with jquery ajax.
Now one more problem has occured. The request is success but it give me the same data

function setQuoteAndAuthor(data) {
  $( "#new-quote" ).click(function() {
  $( "#text, #author" ).animate({
    opacity: 0.2
  }, {
    duration: 1000,
    complete: function(){
      $("#author").text(data[0]['title'])
      $("#text").html(data[0]['content'])
    }
  });
});
  $("#text, #author").animate({
    opacity:1
  },{duration:1000})
}
  // $('#author').text(data[0]['title']);
  // $('#text').html(data[0]['content']);
function getRandomQuote() {
  $.ajax({
    type: 'GET',
    url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand',
    dataType: 'json',
    success: function(data) {
      setQuoteAndAuthor(data);
    }
  })
}
class App extends React.Component {
  constructor(props){
    super(props)
  }
  
  render() {
    return(
      <div id="quote-box">
        <div id="text">
        </div>
        <div id="author">
        </div>
        <button id="new-quote" onClick={getRandomQuote}>
          New Quote
        </button>
        <a href="twitter.com/intent/tweet" id="tweet-quote"><i class="fa fa-twitter"></i></a>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('appl'));

Any suggestion?

8

I am not using any proxy

9

tried googling but most of the solutions include XMLHttpRequest which gives CORS

10

When I did this project, I also ran into the cors problem, so I decided to use wikipedia (which is cors-enabled) as my source of quotes. Wikipedia is probably the largest quote base, you can find :slight_smile: Getting my data from there taught me a lot, how to use RegEx to extract the data I want and how to use the wikipedia API.

Regarding “the right way”: Using a proxy, when you want to use an API, which isn’t cors-enabled, just makes it simpler to concentrate on your frontend, which is the main task in this project. As @kylec pointed out, diving into back-end will solve this.

$.ajax is using XMLHttpRequest under the hood and you shouldn’t use jquery in your React App to manipulate DOM, you should try solving this with state and props.

11

I am sorry but can you please explain why not to use jquery with react. As far as I know jquery will help reduce my work.
also XMLHttpRequest gives CORS and $.ajax doesn’t I don’t know if it is due to my browser or any other reason.
I am not using any proxy.

12

Can anyone give me reason as to why CORS occur for some sites and not for the others?

13 
var corsOptions = {
  origin: 'http://localhost:4200',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
}

Well code is not easy… and if u cant code backend there is still ways to do it…
this is from a backend in nodejs…
I dont have any more suggestions since im not using react or jquery…
But if its make job done use a proxy!!
But u need to send headers that tell server to accept cross origins…
thats whole point… cross origins is just security measure at its core.
But google is full of this topics GL!