Question

我正在尝试从API获取数据并将其显示在浏览器中。我使用的是fetch()方法，而不是进行AJAX调用。我的代码在Chrome中运行正常。但是，在Mozilla中显示此错误：

跨源请求被阻止：同源策略禁止阅读 http://starlord.hackerearth.com/movieslisting上的远程资源。（原因：CORS标头“ Access-Control-Allow-Origin”不匹配 ‘http://localhost:8000，*’）。

我正在使用localhost服务器运行此代码，并使用以下命令运行服务器：

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

我想念什么吗？

编辑：
请求标头：

    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

使用fetch（）时在mozilla firefox中阻止了跨域请求

0 个答案: