FETCH:我在DevTools中看到了响应,但FETCH仍然给我一个&Quot;Access-Control-Allow-Origin-Get问题

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:我在DevTools中看到了响应,但FETCH仍然给我一个&Quot;Access-Control-Allow-Origin-Get问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我有一个关于fetchAccess-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'变量无论如何都是空的。

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

你知道吗? 提前感谢

编辑:由于它在PostmannCurl上工作,而且我可以在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 initnpm 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问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)