使用JS Fetch禁用CORS [英] Disabling CORS using js fetch

问题描述

我已经对其进行了调查，但我的语法看起来正确，但是我无法弄清楚出了什么问题.如果我不包括options参数，那么除了打开CORS之外，其他所有东西都可以正常工作，这是我不想要的.

I've looked into it and my syntax looks correct but I can't figure out what is going wrong. If I didn't include the options params, everything works fine except CORS is on, which is what I do not want.

在请求中添加模式选项后，现在所有请求的图像均出现此错误:

After adding the options with mode in the request, I am now getting this error with all requested images:

image-cropper-modal.js:73 GET数据:net :: ERR_INVALID_URL

image-cropper-modal.js:73 GET data: net::ERR_INVALID_URL

已经尝试在此处查找: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch 此处: https://jakearchibald.com/2015/thats-so-fetch/

have already tried looking here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch and here: https://jakearchibald.com/2015/thats-so-fetch/

这是我的代码:

const options = {
  method: 'GET',
  mode: 'no-cors'
};

fetch(url, options).then(response => response.blob())
   .then(blob => {
      let reader = new FileReader();
      reader.onload = () => {
        const type = blob.type;
        const [image, dataUrl] = [new Image(), reader.result];
        image.src = dataUrl;
        const [width, height] = [image.width, image.height];
        const {minWidth, minHeight} = props.opt;
        const isWithinBounds = (width >= minWidth) && (height >= minHeight);
        callback({
          dataUrl,
          height,
          minHeight,
          minWidth,
          width
        });
   }
   reader.readAsDataURL(blob) 
});

推荐答案

使用 no-cors 选项将 not 给出可读的响应:

Using the no-cors option will not give you a readable response:

no-cors —防止该方法成为 HEAD ， GET 或 POST 之外的任何其他方法.如果有任何ServiceWorkers截获这些请求，则除了这些请求之外，它们不得添加或覆盖任何标头.此外，JavaScript可能无法访问所得响应的任何属性.这可确保ServiceWorkers不会影响Web的语义，并防止因跨域泄漏数据而引起的安全性和隐私问题.(源，重点是我的)

no-cors — Prevents the method from being anything other than HEAD, GET or POST. If any ServiceWorkers intercept these requests, they may not add or override any headers except for these. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains. (source, emphasis mine)

换句话说，如果要从JavaScript发出请求，则需要启用CORS.如果您无法自己在服务器上设置CORS支持，则唯一的解决方法是通过服务器代理您的请求，以代表您提出非CORS请求(通过使用自己的服务器或使用第三方服务器，第三方服务，例如 crossorigin.me 或随时随地或其他一系列类似服务中的任何一个.

In other words, if you want to make a request from JavaScript, you need to have CORS enabled. If you can't set up CORS support on the server yourself, the only way around this is to proxy your request through a server makes non-CORS requests on your behalf (either by using up your own server, or by using a third-party service such as crossorigin.me or cors-anywhere, or any of a bunch of other similar services).

对于上下文， no-cors 选项可用，因为在某些情况下，您可能需要发出非CORS请求而不必读取响应.例如，服务工作者可以使用此选项进行拦截(例如，重定向或缓存(但不能读取或修改)浏览器发出的请求(例如< img> 标签或HTML页面，而不仅仅是JavaScript代码).

For context, the no-cors option is available because there are some cases where you may want to make a non-CORS request without having to be able to read the response. For instance, service workers can use this option to intercept (e.g., redirect or cache, but not read or modify) requests made by the browser (like <img> tags or HTML pages, not just JavaScript code).

这篇关于使用JS Fetch禁用CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！