使用js fetch禁用CORS

时间:2016-12-08 01:43:00

标签: javascript

我已经查看了它,我的语法看起来正确,但我无法弄清楚出了什么问题。如果我没有包含选项参数,一切正常,除了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) 
});

1 个答案:

答案 0 :(得分:5)

使用no-cors选项,会给您一个可读的回复:

  

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

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

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