Я пытаюсь получить данные из API и показать их в своем браузере. Я использую метод fetch()
вместо вызова AJAX. Мой код отлично работает в Chrome. Тем не менее, в Mozilla он показывает эту ошибку:
Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение
удаленный ресурс на http://starlord.hackerearth.com/movieslisting.
(Причина: заголовок CORS «Access-Control-Allow-Origin» не совпадает
‘http://localhost:8000, *’).
Я использую локальный сервер для запуска этого кода и этой команды для запуска сервера:
python -m SimpleHTTPServer 8000
Вот мой код в ванильном JS:
window.addEventListener("load", getdata, false);
function getdata() {
fetch("http://starlord.hackerearth.com/movieslisting", {mode: 'cors'})
.then((res) => res.json())
.then((data) => {
let output = "";
data.forEach(function (movie) {
output +=
`
<div class="card shadow-sm border-0">
<img class="card-img-top" src="https://via.placeholder.com/350x250" alt="Card image" style="width:100%">
<div class="card-body">
<h5 class="card-title">${movie.movie_title}</h5>
<p>Directed by: ${movie.director_name}</p>
<p>Starring: ${movie.actor_1_name} , ${movie.actor_2_name}</p>
</div>
</div>
`;
});
document.getElementById('display-listing').innerHTML= output;
})
}
Я перешел по следующей ссылке за помощью. Но не получил никакой подсказки:
https://developers.google.com/web/updates/2015/03/introduction-to-fetch
Я что-то упустил?
EDIT:
Заголовки запроса:
Origin: http://localhost:8000
Referer: http://localhost:8000/
User-Agent: Mozilla/5.0
Заголовки ответа:
Access-Control-Allow-Origin: http://localhost:8000
Connection: Keep-Alive
Content-Length: 253880
Content-Type: application/json
Date: Sat, 08 Sep 2018 17:18:16 GMT
Keep-Alive: timeout=5, max=100
Server: Apache/2.4.7 (Ubuntu)
Vary: Origin
Общее:
Request URL: http://starlord.hackerearth.com/movieslisting
Request Method: GET
Status Code: 200 OK
Remote Address: 54.179.4.248:80
Referrer Policy: no-referrer-when-downgrade