0

I have been working on my Javascript code since last night however, I can't seem to make it work, It is supposed to pull the visits from my API which is connected to my Lambda function and DynamoDB. It is giving me the following error:

(index):1 Access to fetch at 'api link here ' from origin 'origin here' has been blocked by CORS policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I fixed this problem by installing a CORS remover on Google Chrome however it then gives me this error:

VM37:4 Visitor Count:undefined
VM37:7 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
    at <anonymous>:7:54

Does anyone know how to fix this error and make my JS pull information from my API link, I would appreciate it. Code is below.

fetch('api link here')
   .then(function(sitevisits)
   {
   console.log("Visitor Count:" +
sitevisits.visits);

document.querySelector("#Visitors-text").innerHTML = "Total Visitors"+  
sitevisits.visits;   
 });
Fellowmen556
  • 69
  • 6
  • 1
    "_Cannot set property 'innerHTML' of null_" means that `document.querySelector("#Visitors-text")` returns `null`. Which means that it can't find an element with `id` `Visitors-text`. That has nothing to do with pulling data from an API. – Ivar Jul 22 '20 at 09:12
  • Does that mean I have to use the primary key in (DynamoDB) for the id? – Fellowmen556 Jul 22 '20 at 09:14
  • No, it has nothing to do with database ids. It searches the DOM for an element with that `id`. Something like ``. If it can't find any, it will return `null`. (But I assume you wrote the line `document.querySelector("#Visitors-text")`? What did you expect it to do?) – Ivar Jul 22 '20 at 09:16
  • Regarding the CORS issues, you state it is your API. Why don't you add the appropriate CORS headers then? "installing a CORS remover on Google Chrome" only makes your Chrome less secure. Not to mention that that will not work for others using your application. – Ivar Jul 22 '20 at 09:21
  • Ok, I will try to rewrite my code then, also regarding the CORS I wasn't sure how to do that which is why i mentioned it. – Fellowmen556 Jul 22 '20 at 09:24
  • I recommend that you edit your question title so it is more descriptive. Aside, from this problem, your question has been asked and answered many times: [Null TypeError](https://stackoverflow.com/questions/18239430/cannot-set-property-innerhtml-of-null). [CORS Headers](https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9) or [CORS Headers in depth](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe). – Doomd Jul 22 '20 at 09:38

1 Answers1

0

You need to enable CORS :

fetch(request, {mode: 'cors'});

So do that :

fetch('api link here', {mode: 'cors'})
   .then(function(sitevisits)
   {
   console.log("Visitor Count:" +
sitevisits.visits);

document.querySelector("#Visitors-text").innerHTML = "Total Visitors"+  
sitevisits.visits;   
 });

For your second error, "#Visitors-text" are not found, check if the element with this id exist.

Jonathan Delean
  • 1,011
  • 1
  • 8
  • 25