Question

我正在使用superagent（与npm一起安装）从api获取信息。这是javascript文件中的代码：

    const http = require('superagent');

http
.get('https://random.dog/woof.json')
.end( function(err, res) {
    console.log(err);
    console.log(res.body);
});

我可以通过输入节点app.js在我的终端中测试这个。控制台中会显示两条消息，首先是null，然后是{ url: 'https://random.dog/2d394360-33e1-4c27-9e64-d65a2ab82d5b.jpg' }，这正是我要查找的内容。然后我使用browserify命令（browserify app.js -o bundle.js）使我的javascript文件在html文件中可用。这是我的html文件的代码：

    <html>
    <head>

    </head>
    <body>
        <h1>Text</h1>
        <script src="bundle.js"></script>
    </body>
    </html>

相对简单。这只是为了确保一切顺利。我在浏览器中打开了HTML文件（最新版本的firefox）并打开了开发人员控制台。This error appeared。我有点生气。当我编写一个discord bot并且没有遇到任何问题时，我使用了这个完全相同的API。所以，自然我改变了浏览器。同样的错误。我做了一些研究，仍然有点困惑，所以我试着设置一个标题。新的js文件：

const http = require('superagent');

http
.get('https://random.dog/woof.json')
.set('Access-Control-Allow-Origin', '*')
.end( function(err, res) {
    console.log(err);
    console.log(res.body);
});

这一次，this error出现了。它似乎是沿着同样的路线。幸运的是，我拥有一个小网站，所以我将这些html和js文件上传到服务器。我有完全相同的错误。我甚至将.set('Access-Control-Allow-Origin', '*')更改为.set('Access-Control-Allow-Origin', 'http://example.com')（当然，example.com是我网站的域名）。没有区别。我决定看看我是否可以使用html文件中的javascript来发出请求，而无需调用任何其他来源。我试过这段代码：

var HttpClient = function() {
            this.get = function(aUrl, aCallback) {
                var anHttpRequest = new XMLHttpRequest();
                anHttpRequest.onreadystatechange = function() { 
                    if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                        aCallback(anHttpRequest.responseText);
                }

                anHttpRequest.open( "GET", aUrl, true );            
                anHttpRequest.send( null );
            }
        }
        var client = new HttpClient();
        client.get('http://random.dog/woof.json', function(response) {
            console.log(response);
        });

并在firefox中打开了新的html文件。我和第一次有同样的错误。

为什么我收到这些错误？我该怎么做才能解决这些错误？提前谢谢。

Answer 1

默认情况下，同源策略会阻止对其他域的Ajax请求。允许此类Ajax请求的唯一方法是通过CORS，这需要服务器启用CORS。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS https://www.html5rocks.com/en/tutorials/cors/

服务器必须具有Access-Control-Allow-Origin标头，而不是客户端。例如，尝试呼叫https://api.github.com/而不是https://random.dog/woof.json，您会发现您可以访问该网址，因为它已启用CORS标头。

历史上，JSON-P也被用作同源策略的变通方法，但它通常不如CORS，也需要服务器支持。

解决此问题的第三种方法是通过您用于站点的服务器反向代理远程服务器，以便原点匹配。这种方法在某些情况下可以很好地工作，但它带来了自己的扩展和安全性考虑。

使用Superagent Access-Control-Allow-Origin错误获取请求

1 个答案: