Fetch备忘

fetch搞久了就会忘记细节, 尤其是碰到跨域

头

  var myHeaders = new Headers(); // Currently empty
  myHeaders.append('Content-Type', 'image/jpeg');
  

其实都用默认就挺好

这么搞, 什么参数都不弄, 竟然反而是成功的.

  function geti (url) {
    fetch(url)
      .then(response => response.blob())
      .then(blob => {
      console.log(blob);           
    });
  }
  
  var url='https://upload.wikimedia.org/wikipedia/commons/9/98/Pet_dog_fetching_sticks_in_Wales-3April2010.jpg';
  geti (url);

但是除了wiki其他网站就不行了. mdn和google的图片这么拿都报错.

  Access to fetch at 'https://mdn.mozillademos.org/files/13374/we-flow.png' from origin 'http://' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

列一点有用的页面吧, 这个事mdn页面也很乱

• 头部的mine: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
• cors跨域, 中文翻译有点问题: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
• 请求头: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers
• 这里给了一个牛逼的方案: https://stackoverflow.com/questions/25753754/canvas-todataurl-security-error-the-operation-is-insecure
  • 用charles给所有的http请求头加上: “Access-Control-Allow-Origin: *”