0

I made an api that is located at path localhost:3000 and localhost:3000/api/users returns users in json format. I also created a webpage that gets loaded when url localhost:3000 is reached which has a button which upon clicked runs a method to GET users from localhost:3000/api/users using XMLHttpRequest() method. Basically the webpage at localhost:3000 is acting as font end to query api(backend) at localhost:3000/api/users

But when I click that button, it throws an error into console which is Access to XMLHttpRequest at 'localhost:3000/api/users/' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. It was confusing at first because both my webpage and api is having same domain that is localhost:3000 but if I do document.origin at front-end web page its returns undefined. Which is something I dont understand why ? cuz its supposed to return localhost:3000, as it is the domain of the webpage.

Additional info- I did this all in node.js express framework.

vishaltewatia
  • 47
  • 4
  • Hi. I guess you are not indicating the protocol http in the XMLHttpRequest call performing from frontend. Can you double check it and ensure you have the full domain with the protocol? http://localhost:3000/api/users instead of localhost:3000/api/users/ – Jose Mato Jan 05 '19 at 11:03
  • I am using fetch(), and its working and yea i did use http:// before the url in xmlhttprequest() – vishaltewatia Jan 05 '19 at 12:48
  • Thanks for the explanation. Are you using Google Chrome? https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin – Jose Mato Jan 05 '19 at 12:52

0 Answers0