Fetch API & HTTP Response opaque All In One

error

Promise {<rejected>: SyntaxError: Unexpected end of input at

A no-cors request makes the response type opaque.
Opaque means your frontend JavaScript code can’t see the response body or headers. ❌

  const promise = await fetch(url, {
    // method: 'GET', // *GET, POST, PUT, DELETE, etc.
    // mode: 'cors', // no-cors, *cors, same-origin
    // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    // credentials: 'same-origin',
    // credentials: 'include',
    method: 'GET',
    // mode: 'no-cors',
    // ❌  A no-cors request makes the response type opaque. Opaque means your frontend JavaScript code can’t see the response body or headers.
    // responseType: 'arraybuffer',
    // responseType: 'blob',
    headers: {
      // 'Accept': type,
      'Content-Type': type,
      // 'Content-Type': 'application/octet-stream',
      // 'Accept': 'video/mp4',
      // 'Accept': 'application/json',
      // 'Content-Type': 'application/json;charset=utf-8'
      // 'Content-Type': 'application/json',
      // 'Content-Type': 'application/x-www-form-urlencoded',
      // ...headers,
    },
  }).then(res => {
    if(type.includes('json')) {
      const json = res.json();
      console.log('json =', json);
      return json;
    } else {
      const buffer = res.arrayBuffer();
      console.log('buffer =', buffer);
      return buffer;
    }
  }).then(data => {
    console.log('data =', data);
    const blob = new Blob(
      [data],
      {'type' : type},
    );
    const urlBlob = URL.createObjectURL(blob);
    dom.src = urlBlob;
    link.href = urlBlob;
    link.innerText = urlBlob;
  }).catch(err => {}).finally(() => {});

https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input-when-using-mode-no-cors

HTTP Response & type: 'opaque',

// res = Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …}body: (...)bodyUsed: falseheaders: Headers {}ok: falseredirected: falsestatus: 0statusText: ""type: "opaque"url: ""[[Prototype]]: Response
fetch.js:48 buffer = Promise {<fulfilled>: ArrayBuffer(0)}

ReadableStream

type: "basic"
url: "https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4

// fetch.response = Response
fetch.response = Response {type: 'basic', url: 'https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4', redirected: false, status: 200, ok: true, …}body: ReadableStreamlocked: true[[Prototype]]: ReadableStreamcancel: ƒ cancel()getReader: ƒ getReader()length: 0name: "getReader"arguments: (...)caller: (...)[[Prototype]]: ƒ ()[[Scopes]]: Scopes[0]locked: truepipeThrough: ƒ pipeThrough()pipeTo: ƒ pipeTo()tee: ƒ tee()constructor: ƒ ReadableStream()Symbol(Symbol.toStringTag): "ReadableStream"get locked: ƒ locked()[[Prototype]]: ObjectbodyUsed: trueheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: ""type: "basic"url: "https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4"[[Prototype]]: ResponsearrayBuffer: ƒ arrayBuffer()blob: ƒ blob()body: ReadableStreambodyUsed: (...)clone: ƒ clone()formData: ƒ formData()headers: (...)json: ƒ json()ok: (...)redirected: (...)status: (...)statusText: ""text: ƒ text()type: "basic"url: "https://cdn.xgqfrms.xyz/HTML5/Blob/2022-04-07-sh.mp4"constructor: ƒ Response()Symbol(Symbol.toStringTag): "Response"get body: ƒ body()get bodyUsed: ƒ bodyUsed()get headers: ƒ headers()get ok: ƒ ok()get redirected: ƒ redirected()get status: ƒ status()get statusText: ƒ statusText()get type: ƒ type()get url: ƒ url()[[Prototype]]: Object

demos

<iframe src="https://cdn.xgqfrms.xyz/HTML5/Blob/fetch/index.html" width="100%" height="500"></iframe>

https://cdn.xgqfrms.xyz/HTML5/Blob/fetch/index.html

preview codepen (click run pen)

https://codepen.io/xgqfrms/embed/preview/XWVYQPb

<iframe height="558.0556640625" style="width: 100%;" scrolling="no" title="Fetch API &amp; Blob File Download &amp; HTML5 Download" src="https://codepen.io/xgqfrms/embed/XWVYQPb?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/xgqfrms/pen/XWVYQPb">
  Fetch API &amp; Blob File Download &amp; HTML5 Download</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

https://codepen.io/xgqfrms/embed/XWVYQPb

(🐞 反爬蟲測試！打擊盜版⚠️）如果你看到這個信息, 說明這是一篇剽竊的文章，請訪問 https://www.cnblogs.com/xgqfrms/ 查看原創文章！

credentials

fetch POST cookies & credentials

fetch(`http://localhost:3000/api/post`, {
    body: JSON.stringify({key: "value"}),
    // cache: "no-cache",
    headers: {
        "Content-Type": "application/json",
    },
    method: "POST",
    // cookies
    credentials: 'include',
    // credentials: 'same-origin',
    // credentials: 'omit',
    // mode: "no-cors",
    mode: "cors",
})
.then(res => console.log(`res =`, res))
.catch(err => console.error(`error =`, err));

1. same-origin
   Send user credentials (cookies, basic http auth, etc..) if the URL is on the same origin as the calling script.
   This is the default value.

2. include
Always send user credentials (cookies, basic http auth, etc..), even for cross-origin calls.

3. omit
Never send or receive cookies.

https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

refs

https://github.com/xgqfrms/learning/issues/24

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---