我正在使用 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);
});
我可以通过输入 node 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>
比较简单。这只是为了确保一切顺利。我在浏览器(最新版本的 Firefox)中打开了 HTML 文件，然后打开了开发者控制台。 This error appeared 。我有点生气。我在编写 Discord 机器人时使用了完全相同的 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 文件。我遇到了与第一次相同的错误。
为什么我会收到这些错误？我可以做什么来修复这些错误？提前致谢。
最佳答案
默认情况下，同源策略会阻止对不同域的 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 header ，而不是客户端。例如，尝试调用 https://api.github.com/ 而不是 https://random.dog/woof.json，您会发现您可以访问该 URL，因为它启用了 CORS header 。
历史上，JSON-P 也被用作同源策略的解决方法，但它通常不如 CORS，并且还需要服务器支持。
解决此问题的第三种方法是通过您用于站点的服务器反向代理远程服务器，以便源匹配。这种方法在某些情况下可以很好地工作，但会带来其自身的扩展和安全考虑。
关于javascript - 带有 Superagent Access-Control-Allow-Origin 错误的 GET 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46187126/