No 'Access-Control-Allow-Origin' header is present on the requested resource

1

I’m doing the random quote machine chalenge using https://quotesondesign.com/api-v4-0/ I was getting the code on the page, then it stopped working and on the console i get this error:

Failed to load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://127.0.0.1:3000’ is therefore not allowed access.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Quote Machine Generator!</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <section class="row">
    
    <p class="quote">Lorem ipsum dolor si sed amet libero beatae quod uhue gte odit.</p>
    <p class="author">- Emerson Lopes</p>
    <button class="new-quote" type="button" name="button">New quote</button>
    
  </section>
  
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script> 
  
  
</body>
</html>

JS

ps. dont mind js and jquery just in one file

// jshint esversion: 6
let body = document.querySelector("body");
let btn = document.querySelector(".new-quote");
let allchar = "0123456789ABCDEF";
let quote = document.querySelector(".quote");
let author = document.querySelector(".author");

btn.addEventListener("click", function(){

  // random color on click
  let  randcol= "";
  for(let i = 0; i < 6; i++){
   randcol += allchar[Math.floor(Math.random()*16)];
}
  body.style.backgroundColor = "#"+randcol;

});

// let json = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
// let json2 = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=";

// JQUERY
$(document).ready(function() {
  
  $(btn).on("click", function(){
    
      $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
        $(quote).html(a[0].content);
        $(author).html(`- ${a[0].title}`);
      });
      
      // $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
      //   $(body).append(a[0].content + "<p>— " + a[0].title + "</p>");
      // });
      
    


    
    // $(author).html('Someone really awesome!');
    
  });
});
1 Like
2

I’ve tried sending the request from chrome console, it worked fine.
Try using codepen. Probably CORS issues occur because of local development.

3

jQuery is JS.

But anyway, when I load this into codepen (because it’s quicker), and it works fine.

But when I load it locally on my system, it doesn’t, same problem as you.

I have a quote API test program that has the same issue. It crashes for CORS problems for quotesondesign (but for some reason has no problem with forismatic.

CORS problems are always a pain in the butt. I would recommend doing some research there. I did some searching and found that Chrome doesn’t like dealing with CORS from localhost. So I tried Firefox, but same problem. So I tried IE and it worked.

I think that the problem here is because it is being locally served. Certain browsers have an issue with that. When you put this on the internet, it won’t be a problem. For now, You can use IE to test it locally. There are also ways to turn off the CORS protection in the other browsers, but that is too complicated for now.

The other issue is that your code, when it works, is “returning” the same quote every time - you need to prevent the browser from caching in the code.

4

Yes that’s why it works fine together, I just said that cause some people like to keep then separated.

oh! I will test this on codepen then, thanks!

5

yup that’s kinda of a pain, I will try using codepen

6

This might help you out.

The problem is that popular browsers require a web server for cors requests.

7

Have you tried using https://quotesondesign... instead of http? You should get a response if you used https.

1 Like
8

I’m kind of beginner so I have no clue what you’re talking about xD

9

This. The only thing I have to add is that if you are accessing it with, ie; localhost:3000, you might try 127.0.0.1:3000 instead. I think sometimes it makes a difference.

10

I use a mac so I cant install IE, is it there any other browser I can test this? I already tried on Safari and Firefox and on Codepen I continue to get the same error.

oh thanks! that bug was bothering me a lot xD

11

When it comes to CORS issues it’s often recommended to load the resource through https://cors-anywhere.herokuapp.com

12

Hey, after looking up the problem I just found out another API and it does not throw me any errors

api:
https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?

interesting from the FCC forum as well:
https://forum.freecodecamp.org/t/help-requested-for-random-quote-generator-solved/25206/3

so it’s working now :smiley: thanks to everyone who helped me!