Question

我已经查看了它，我的语法看起来正确，但我无法弄清楚出了什么问题。如果我没有包含选项参数，一切正常，除了CORS打开，这是我不想要的。

在请求中添加模式选项后，我现在收到所有请求图像的错误：

image-cropper-modal.js：73获取数据：net :: ERR_INVALID_URL

已经尝试过这样看：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 在这里：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) 
});

Answer 1

使用no-cors选项，不会给您一个可读的回复：

no-cors - 防止该方法不是HEAD，GET或POST。如果任何ServiceWorkers拦截这些请求，他们可能不会添加或覆盖除这些之外的任何标头。 此外，JavaScript可能无法访问生成的响应的任何属性。这可确保ServiceWorkers不会影响Web的语义，并防止因跨域泄漏数据而导致的安全和隐私问题。 （source，强调我的）

换句话说，如果您想从JavaScript发出请求，则需要启用CORS。如果您不能自己在服务器上设置CORS支持，唯一的方法是通过服务器代理您的请求代表您发出非CORS请求（通过使用您自己的服务器，或使用第三方服务，例如crossorigin.me或cors-anywhere，或任何其他类似服务。）

对于上下文，no-cors选项可用，因为在某些情况下您可能希望在不必读取响应的情况下发出非CORS请求。例如，service workers可以使用此选项拦截（例如，重定向或缓存，但不读取或修改）浏览器发出的请求（如<img>标签或HTML页面，而不仅仅是JavaScript代码）。

使用js fetch禁用CORS

1 个答案: