Question

我尝试fetch旧网站的网址，但发生了错误：

Fetch API cannot load http://xyz.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://abc' is therefore not allowed access.
If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.

我理解了这条消息，并试图做一个返回不透明响应的请求：

fetch("http://xyz", {'mode': 'no-cors'})

好的，它现在有效......但我无法阅读它。 = \

不透明回应的目的是什么？

Answer 1

考虑服务工作者充当不可知缓存的情况。您唯一的目标是提供从网络获得的相同资源，但速度更快。当然，您无法确保所有资源都是您的原始资源（例如，考虑从CDN提供的库）。由于服务工作者有可能改变网络响应，因此您需要保证您对响应的内容，标题，甚至结果都不感兴趣。你只对作为黑盒子的响应感兴趣，可以缓存它并更快地提供它。

这是{ mode: 'no-cors' }的目的。

Answer 2

JavaScript无法访问不透明的响应，但您仍然可以使用Cache API缓存它们，并在服务工作者的fetch事件处理程序中对它们进行响应。因此，它们对于使您的应用程序脱机非常有用，也适用于您无法控制的资源（例如CDN上未设置CORS标头的资源）。

Answer 3

还有Node JS应用程序的解决方案。 CORS Anywhere是一个NodeJS代理，它将CORS头添加到代理请求中。

代理的url字面上取自路径，验证和代理。代理URI的协议部分是可选的，默认为＆＃34; http＆＃34;。如果指定了端口443，则协议默认为＆＃34; https＆＃34;。

除了cookie之外，这个包对http方法或标题没有任何限制。不允许请求用户凭据。可以将应用程序配置为需要用于代理请求的标头，例如以避免从浏览器直接访问。 https://robwu.nl/cors-anywhere.html

Answer 4

javascript很难得到答案，我通过从后端获取api然后将其调用到前端来解决了这个问题。

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,x-auth-token');
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Expose-Headers', 'x-auth-token');
  if (req.method === "OPTIONS") {
    res.sendStatus(200);
  } else {
    next();
  }
});

什么是不透明的回应，它的目的是什么？

4 个答案: