Fetch API nie może załadować, kor

Question

W moim React aplikacji Próbuję dokonać GET prośbę od mojego serwera Heroku aby uzyskać listę użytkowników:

https://blablabla.heroku.com/users 

stosując następujący wniosek:

const sendSearch = fetch('/https://blablabla.heroku.com/users', {credentials: 'same-origin'}) 

function loadMyUsers(data) { 
    data.json().then((jsonData) => { 
    // console.log(jsonData) 

    }) 
} 

sendSearch.then(loadMyUsers)} 

Jednak pojawia się następujący błąd:

Fetch API cannot load https://blablabla.heroku.com/users. 
Response to preflight request doesn't pass access control check: No 
'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:8080' is therefore not allowed 
access. If an opaque response serves your needs, set the request's mode 
to 'no-cors' to fetch the resource with CORS disabled. 

Próbowałem zmienić moją metodę pobierania do wielu rzeczy podobnych do:

const sendSearch = fetch('https://blablabla.heroku.com/users',{ 
    method: 'GET', 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
    'mode': 'no-cors' 
    } 
}) 

ale problem nadal występuje.

Jak utworzyć żądanie wzajemnej domeny?

Answer 1

Na swoim serwerze heroku powinieneś dodać Access-Control-Allow-Origin: * do nagłówków odpowiedzi, lub bardziej szczegółowe Access-Control-Allow-Origin: http://localhost:8080, jeśli chcesz.

Na serwerze produkcyjnym prawdopodobnie nie będzie potrzebny ten nagłówek, chyba że masz bardzo dobry powód dla żądań krzyżowego pochodzenia.