简体   繁体   English

Fetch:我在 DevTools 中看到了响应,但 Fetch 仍然给我一个 GET 的“Access-Control-Allow-Origin”问题

[英]Fetch: I see the response in the DevTools but Fetch still gives me an "Access-Control-Allow-Origin" issue for GET

So I have an issue regarding fetch and Access-Control-Allow-Origin .所以我有一个关于fetchAccess-Control-Allow-Origin

I try to fetch some site like this:我尝试获取一些这样的网站:

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

So in the Chrome Network tab, I see that apparently there was no issue.所以在 Chrome 网络标签中,我看到显然没有问题。 However, in JavaScript code, I get CORS issues.但是,在 JavaScript 代码中,我遇到了CORS问题。 How is that even possible?这怎么可能呢? See:看:

在此处输入图片说明

I tried adding mode: 'cors' it does not help.我尝试添加mode: 'cors'它没有帮助。 I tried adding mode: 'no-cors' yes it goes through but I can't read the answer in this case I get Unexpected end of input and the 'blob' variable is empty anyway.我尝试添加mode: 'no-cors'是的,它通过了,但在这种情况下我无法阅读答案,我得到了Unexpected end of input无论如何'blob'变量是空的。

If I do the same GET request without any options or headers using Postman or Curl it works like a charm and I get my response.如果我使用PostmanCurl在没有任何选项或标题的情况下执行相同的 GET 请求,它就像一个魅力,我会得到我的回应。

Do you have any idea?你有什么主意吗? Thanks in advance提前致谢

Edit: Since it is working on Postmann and Curl and since I can see the response in the Chrome Debugger, I don't think that it is a duplicate of another question where the request clearly goes to an external URL that does not allow to be accessed from somewhere else.编辑:由于它正在处理PostmannCurl并且因为我可以在 Chrome Debugger 中看到响应,我认为它不是另一个问题的重复,其中请求明确转到不允许的外部 URL从其他地方访问。 Right?对?

Edit2: Could it potentially have to do that the address: https://localhost is self-signed and thus has no valid certificate? Edit2:它可能必须这样做地址: https://localhost是自签名的,因此没有有效的证书? In curl I had to add --insecure flag.curl我必须添加--insecure标志。

As pointed out by TJ Crowder, this is impossible to do in the browser .正如 TJ Crowder 所指出的,这在浏览器中不可能做到的 See related resources:查看相关资源:

But, do not despair!但是,不要绝望! There is a workaround :有一个解决方法

cURL Server Workaround: cURL 服务器解决方法:

We are going to use a node server calling cURL to bypass the restriction:我们将使用调用cURL的节点服务器来绕过限制:

You'll need nodejs with npm.您将需要带有 npm 的 nodejs。

  • Do npm init and npm i -S expressnpm initnpm i -S express
  • Add an api.js file.添加一个api.js文件。 With following code:使用以下代码:
    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!'); });
  • Run the server via node api.js通过node api.js运行服务器
  • Now in your code you can make a request to localhost:3000 adding the url you want to make the get request to in the query parameters.现在,在您的代码中,您可以向localhost:3000发出请求,并在查询参数中添加要向其发出get请求的 url。 Example:例子:
    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));
  • The requerst is now working as expected.请求现在按预期工作。 Enjoy.享受。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Firebase 获取 - 无访问控制允许来源 - Firebase Fetch - No Access-Control-Allow-Origin Salesforce响应中的跨源问题(Access-Control-Allow-Origin) - Cross origin issue in salesforce response(Access-Control-Allow-Origin) Access-Control-Allow-Origin: * 已设置但我仍然不允许 Origin - Access-Control-Allow-Origin: * is set but I still get Origin not allowed 没有“访问控制允许来源”,但仍在处理 - No 'Access-Control-Allow-Origin' but still processing 在获取 api 时发布请求 CORS 错误(Access-Control-Allow-Origin),即使我在 header 上添加了访问控制 - Post Request CORS Error (Access-Control-Allow-Origin) on fetch api even i added access control on my header CORS 策略已阻止从 *** 从源 *** 获取访问权限:无“访问控制允许源” - Access to fetch at *** from origin *** has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 提取api cors请求引发错误:没有“ Access-Control-Allow-Origin”,但飞行前响应显示标头已设置 - Fetch api cors request throws error: No 'Access-Control-Allow-Origin', but Pre-Flight response shows header is set themoviedb 'Access-Control-Allow-Origin' 问题 - themoviedb 'Access-Control-Allow-Origin' issue 当 Access-Control-Allow-Origin:* 仍然反映在响应中时,跨源请求被阻止 - Cross-Origin request blocked while Access-Control-Allow-Origin:* still reflect in the response “访问控制允许来源”问题 - 'Access-Control-Allow-Origin' issue
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM