Fetch: I see the response in the DevTools but Fetch still gives me an quot;Access-Control-Allow-Originquot; issue for GET(FETCH：我在DevTools中看到了响应，但FETCH仍然给我一个Quot；Access-Control-Allow-Origin-Get问题)

问题描述

所以我有一个关于fetch和Access-Control-Allow-Origin的问题。

我尝试获取一些站点，如下所示：

fetch('https://localhost/.../api/json')
    .then(blob => blob.json())
    .then(data => console.log("data:", data))
    .catch(err => console.log("err: ", err));

所以在Chrome Network选项卡中，我看到显然没有问题。 但是，在JavaScript代码中，我遇到了CORS问题。这怎么可能呢？请参阅：

我尝试添加mode: 'cors'但无济于事。我尝试添加mode: 'no-cors'是的，但我无法读取答案。在这种情况下，我得到Unexpected end of input，而且'blob'变量无论如何都是空的。

如果我使用Postman或Curl在没有任何选项或标头的情况下执行相同的GET请求，则它会像符咒一样工作，我会得到响应。

你知道吗？ 提前感谢

编辑：由于它在Postmann和Curl上工作，而且我可以在Chrome调试器中看到响应，我不认为它是另一个问题的副本，在这个问题中，请求明显地到达了不允许从其他地方访问的外部URL。对吗？

Edit2：它是否可能不得不这样做：地址是自签名的，因此没有有效的证书？在curl中，我必须添加--insecure标志。

推荐答案

正如T.J.Crowder所指出的，这是不可能在浏览器中完成的。请参阅相关资源：

• https://en.wikipedia.org/wiki/Same-origin_policy#Security_Applications
• https://www.w3.org/TR/access-control/
• https://blogs.msdn.microsoft.com/ieinternals/2009/08/28/same-origin-policy-part-1-no-peeking/

但是，不要绝望！有一个解决办法：

cURL服务器解决方法：

我们将使用调用cURL的节点服务器绕过限制：

您将需要带有NPM的NodeJS。

• 执行npm init和npm i -S express
• 添加api.js文件。代码如下：

    const https = require("https");
    const express = require('express');

    const app = express();

    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
    });

    app.get('/', function (req, res) {
        const exec = require('child_process').exec;

        exec('curl ' + req.query.url + ' --insecure', function (error, stdout, stderr) {
          console.log('stdout: ' + stdout);
          console.log('stderr: ' + stderr);

          res.json(stdout);

          if (error !== null) {
            console.log('exec error: ' + error);
          }
        });
    });

    app.listen(3000, function () { console.log('listening on port 3000!'); });

• 通过node api.js
运行服务器
• 现在，在您的代码中，您可以请求localhost:3000在查询参数中添加要向其发出get请求的url。示例：

    fetch('http://localhost:3000/?url=https://HOST/.../api/json')
      .then(blob => blob.json())
      .then(data => console.log("data:", data))
      .catch(err => console.log("err: ", err));

• 请求者现在可以正常工作了。尽情享受。

这篇关于FETCH：我在DevTools中看到了响应，但FETCH仍然给我一个&Quot；Access-Control-Allow-Origin-Get问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！