axios icon indicating copy to clipboard operation
axios copied to clipboard

fix: exception to sending formdata in webworker

Open 0x30 opened this issue 3 years ago • 0 comments

The following code is a request to send fromdata through axios and xhr at the same time

// create formdata
const file = new File(
  [Uint8Array.from(atob(btoa("abc")), (c) => c.charCodeAt(0)).buffer],
  "a.png",
  { type: "image/png" }
);

const form = new FormData();
form.append("file", file);

// axios send
axios.request({ method: "post", url: "/api_axios", data: form });

// xhr send
const xhr = new XMLHttpRequest();
xhr.open("POST", "api_xhr");
xhr.send(form);

Put the above methods into browser to run and web worker to run respectively

browser axios Request Header abstract

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary6OBbVuvmtQJTBd6D

browser xhr Request Header abstract

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryLY8kGoWmnvspdjMs

The above is no problem, of course, when you put the code into web worker to run, it will appear

web worker axios Request Header abstract

Content-Type: application/x-www-form-urlencoded

web worker xhr Request Header abstract

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary6trgIn70ilzcBsuh

At this time, the performance of xhr is normal, but axios has an exception.

To solve this problem I made the following changes. As for why not directly modify the isStandardBrowserEnv method, but create a new isStandardBrowserWebWorkerEnv method, the main reason is that many methods that rely on isStandardBrowserEnv use document in the follow-up.

0x30 avatar Sep 20 '22 03:09 0x30