1

if I execute curl localhost:8080/recipes it works. But if I use my code in javascript in firefox appears the following errors:

  • Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:8080/recipes. (Reason: CORS request did not succeed). Status code: (null).
  • TypeError: NetworkError when attempting to fetch resource.

enter image description here

However if use directly the url it works:

enter image description here

My client code in javascript is very simple:

const url = 'http://localhost:8080';

const ul = document.getElementById('parrafo');
const list = document.createDocumentFragment();

const btn = document.getElementById("boton");

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

  sendData();

});


function sendData(){

fetch(url + "/recipes")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    let recipes = data;

    recipes.map(function(recipe) {
      let li = document.createElement('li');
      let name = document.createElement('h2');
      let id = document.createElement('span');

      name.innerHTML = `${recipe.name}`;
      id.innerHTML = `${recipe.id}`;

      li.appendChild(name);
      li.appendChild(id);
      list.appendChild(li);

      
    });
  })
  .catch(function(error) {
    console.log(error);
  });

  ul.appendChild(list);

}

Thanks in advance

====================================

In the same machine, in developer environment, How should the frontend be executed, directly in a browser? (Do i open it directly with firefox?) With the backend I have no problem at all, it is working perfectly.

grafeno30
  • 479
  • 1
  • 5
  • 17
  • The problem is related to the backend. which package do you use for the webserver? gin? – Amirreza Noori Jan 03 '22 at 07:25
  • Hey, so for security reasons, browsers block requests from and to different ports on the same system. To fix this, you have to enable CORS by adding headers for access-control-allow-origin in your frontend and some related specification to your backend as well. lots of examples available on the net. – Sampurna Jan 03 '22 at 07:31
  • Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – voiarn Jan 03 '22 at 07:33

3 Answers3

3

Either you must to use a proxy on the client side or enable CORS on the server side. By default, requests between two different ports are disabled by CORS

Cjmarkham
  • 9,484
  • 5
  • 48
  • 81
Wraithy
  • 1,722
  • 1
  • 5
  • 13
3

You are trying to connect to localhost with "https", which makes your request cors error.

in the URL your request is with "HTTP". so change this line :

const url = 'http://localhost:8080';
ttrasn
  • 4,322
  • 4
  • 26
  • 43
1

I fixed by myself it is easy:

import (
    "encoding/json"
    "io/ioutil"
    "net/http"
    "time"

    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)

Using the package cors I have to add the next line: ** router.Use(cors.Default()) ** Thanks!!

grafeno30
  • 479
  • 1
  • 5
  • 17