fix(http): include browser headers if not set by user (#1354)

* fix(http): include browser automatic headers if not set by user

close #1349

* fmt

* Update browser-headers.md

* lint

* generate api

Author: amrbashir

.changes/browser-headers.md

@@ -0,0 +1,5 @@
+---
+"http-js": "patch"
+---
+
+Include headers created by browser if not declared by user, which fixes missing headers like `Content-Type` when using `FormData`.

plugins/http/api-iife.js

@@ -117,30 +117,45 @@ export async function fetch(
 
   const headers = init?.headers
     ? init.headers instanceof Headers
-      ? Array.from(init.headers.entries())
-      : Array.isArray(init.headers)
-        ? init.headers
-        : Object.entries(init.headers)
-    : [];
-
-  const mappedHeaders: Array<[string, string]> = headers.map(([name, val]) => [
-    name,
-    // we need to ensure we have all values as strings
-    // eslint-disable-next-line
-    typeof val === "string" ? val : (val as any).toString(),
-  ]);
+      ? init.headers
+      : new Headers(init.headers)
+    : new Headers();
 
   const req = new Request(input, init);
   const buffer = await req.arrayBuffer();
-  const reqData =
+  const data =
     buffer.byteLength !== 0 ? Array.from(new Uint8Array(buffer)) : null;
 
+  // append new headers created by the browser `Request` implementation,
+  // if not already declared by the caller of this function
+  for (const [key, value] of req.headers) {
+    if (!headers.get(key)) {
+      headers.set(key, value);
+    }
+  }
+
+  const headersArray =
+    headers instanceof Headers
+      ? Array.from(headers.entries())
+      : Array.isArray(headers)
+        ? headers
+        : Object.entries(headers);
+
+  const mappedHeaders: Array<[string, string]> = headersArray.map(
+    ([name, val]) => [
+      name,
+      // we need to ensure we have all header values as strings
+      // eslint-disable-next-line
+      typeof val === "string" ? val : (val as any).toString(),
+    ],
+  );
+
   const rid = await invoke<number>("plugin:http|fetch", {
     clientConfig: {
       method: req.method,
       url: req.url,
       headers: mappedHeaders,
-      data: reqData,
+      data,
       maxRedirections,
       connectTimeout,
       proxy,

plugins/http/guest-js/index.ts

@@ -45,7 +45,7 @@ pub struct FetchResponse {
     rid: ResourceId,
 }
 
-#[derive(Deserialize)]
+#[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct ClientConfig {
     method: String,
@@ -57,31 +57,31 @@ pub struct ClientConfig {
     proxy: Option<Proxy>,
 }
 
-#[derive(Deserialize)]
+#[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct Proxy {
     all: Option<UrlOrConfig>,
     http: Option<UrlOrConfig>,
     https: Option<UrlOrConfig>,
 }
 
-#[derive(Deserialize)]
+#[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 #[serde(untagged)]
 pub enum UrlOrConfig {
     Url(String),
     Config(ProxyConfig),
 }
 
-#[derive(Deserialize)]
+#[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct ProxyConfig {
     url: String,
     basic_auth: Option<BasicAuth>,
     no_proxy: Option<String>,
 }
 
-#[derive(Deserialize)]
+#[derive(Debug, Deserialize)]
 pub struct BasicAuth {
     username: String,
     password: String,