vespaiach / axios-fetch-adapter Goto Github PK

I don't know if this is a bug but this looks wrong in the code

Do you want a pull-request that fixes this?

If responseType is set, but the response is empty, this library throws an error.

SyntaxError: Unexpected end of JSON input
    at getResponse (index.js:72:1)
    at async fetchAdapter (index.js:29:1)

I recently came across an issue that is somewhat related to #16 where I was trying to upload a file to an AWS S3 bucket with a Presigned POST URL from inside a Manifest V3 Chrome Extension which requires the use of Service Workers.

axios.defaults.adapter = fetchAdapter;

const formData = new FormData();
Object.entries(fields).forEach(([key, value]) => {
  formData.append(key, value);
});
formData.append('file', file);
await axios.post(s3Url, formData);

Unfortunately this was erroring due to the Content-Type header being set to application/www-x-form-urlencoded instead of multipart/form-data and the WebKit boundary injected by the browser.

Looking into the code it seems the issue is caused by the use of isStandardBrowserEnv() inside the check which should automatically remove the Content-Type header, allowing the browser to fill in the correct one. This helper method is expecting window and document to be defined which is not possible in a Service Worker environment.

if (method !== 'GET' && method !== 'HEAD') {
    options.body = config.data;

    // In these cases the browser will automatically set the correct Content-Type,
    // but only if that header hasn't been set yet. So that's why we're deleting it.
    if (isFormData(options.body) && isStandardBrowserEnv()) {
        headers.delete('Content-Type');
    }
}

@vespaiach Removing the isStandardBrowserEnv() from the if statement solves my problem and allows the file upload to succeed, but I am unsure if it will have any knock on effect to other use cases of this package?

Why yarn add @vespaiach/axios-fetch-adapter not found index.d.ts

Enviroment:
macOS Catalina
nextjs 12

It is seen here, that we evaluate response.data identically for 'success' & error response codes.

In case of 404 error and when await response.text() === '', reading await response.json() throws an error

SyntaxError: Unexpected end of JSON input

The default axios XHR adapter behaves differently & won't throw in this case. With this adapter I have to look into caught error message text at this point.

Since, this adapter relies on fetch API so it won't work in Node environment

not true anymore.

fetch is built into all other env now, including deno, bun, nodejs,

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.
    at createRequest (VM4 worker.js:28479)
    at fetchAdapter (VM4 worker.js:28354)
    at dispatchRequest (VM4 worker.js:27722)
    at async setup (VM4 worker.js:71161)

options.credentials = config.withCredentials ? 'include' : 'omit';
This has to be undefined in a CF worker as they don't implement options.credentials for some reason.

Axios 1.7 adds Fetch adapter

https://www.npmjs.com/package/axios#-fetch-adapter

#22

Hi,

I'm using this adapter with axios in order to make a browser extension work with manifest v3.
However, after that change the headers are empty.

Here's the code:

import fetchAdapter from '@vespaiach/axios-fetch-adapter';
const axiosInstance = Axios.create({
            adapter: fetchAdapter,
            baseURL: `https://${hostname}`,
            withCredentials: true
        });

Then if I check the response the headers are empty. Can you help?

Hi,

When running jest, I've got the following error SyntaxError: Cannot use import statement outside a module , I don't know how to avoid it

Is this repo still maintained/usable?

I tried using this with Quasar V2 to make my Axios calls compatible with service workers, but am having difficulty. All the rest of my frontend data is being saved, but not the Axios GET or POST requests. Any assistance would be much appreciated.

When I use a normal axios request with a FormData payload, I get a header like this:

content-type: multipart/form-data; boundary=----WebKitFormBoundaryAtMBWBnzlZT7VwNE`

And the payload looks like this:

------WebKitFormBoundaryAtMBWBnzlZT7VwNE
Content-Disposition: form-data; name="client_id"

stuff
------WebKitFormBoundaryAtMBWBnzlZT7VwNE
Content-Disposition: form-data; name="grant_type"

password
------WebKitFormBoundaryAtMBWBnzlZT7VwNE
Content-Disposition: form-data; name="username"

manufacturer-moderator
------WebKitFormBoundaryAtMBWBnzlZT7VwNE
Content-Disposition: form-data; name="password"

blablatestpass
------WebKitFormBoundaryAtMBWBnzlZT7VwNE--

but when I use this adapter, the header changes to:

content-type: application/x-www-form-urlencoded

And because now the boundary is missing, the payload has become invalid.

error - ./node_modules/@vespaiach/axios-fetch-adapter/index.js:2:0
Module not found: Package path ./lib/core/settle is not exported from package /.../node_modules/axios (see exports field in /.../node_modules/axios/package.json)

Line 2 it's complaining about https://github.com/vespaiach/axios-fetch-adapter/blob/main/index.js#L2

Using

• axios 1.1.3
• axios-fetch-adapter 0.3.1
• next.js 12.3.1

Hey,
since Axios still does not support this by itself I would be willing to update to the latest in here to at least have latest version of Axios. Would you be willing to give me a CR and merge it if I will make a PR for that?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @vespaiach/[email protected] for the project I'm working on.

I needed to support axios version 1.6.0

Here is the diff that solved my problem:

diff --git a/node_modules/@vespaiach/axios-fetch-adapter/index.js b/node_modules/@vespaiach/axios-fetch-adapter/index.js
index 527e282..649926f 100644
--- a/node_modules/@vespaiach/axios-fetch-adapter/index.js
+++ b/node_modules/@vespaiach/axios-fetch-adapter/index.js
@@ -1,8 +1,9 @@
 import axios from 'axios';
-import settle from 'axios/lib/core/settle';
-import buildURL from 'axios/lib/helpers/buildURL';
-import buildFullPath from 'axios/lib/core/buildFullPath';
-import { isUndefined, isStandardBrowserEnv, isFormData } from 'axios/lib/utils';
+import settle from 'axios/unsafe/core/settle';
+import buildURL from 'axios/unsafe/helpers/buildURL';
+import buildFullPath from 'axios/unsafe/core/buildFullPath';
+import * as browserUtils from 'axios/unsafe/platform/browser';
+import * as utils from 'axios/unsafe/utils';
 
 /**
  * - Create a request object
@@ -106,7 +107,7 @@ function createRequest(config) {
 
         // In these cases the browser will automatically set the correct Content-Type,
         // but only if that header hasn't been set yet. So that's why we're deleting it.
-        if (isFormData(options.body) && isStandardBrowserEnv()) {
+        if (utils.default.isFormData(options.body) && browserUtils.default.isStandardBrowserEnv()) {
             headers.delete('Content-Type');
         }
     }
@@ -127,7 +128,7 @@ function createRequest(config) {
     }
     // This config is similar to XHR’s withCredentials flag, but with three available values instead of two.
     // So if withCredentials is not set, default value 'same-origin' will be used
-    if (!isUndefined(config.withCredentials)) {
+    if (!utils.default.isUndefined(config.withCredentials)) {
         options.credentials = config.withCredentials ? 'include' : 'omit';
     }
 

This issue body was partially generated by patch-package.

It looks like we are losing the original error here:
https://github.com/vespaiach/axios-fetch-adapter/blob/main/index.js#L51
We need to pass the original also to createError()

$ npm i axios
$ npm i @vespaiach/axios-fetch-adapter

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/axios
npm ERR!   axios@"^0.26.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer axios@"^0.21.1" from @vespaiach/[email protected]
npm ERR! node_modules/@vespaiach/axios-fetch-adapter
npm ERR!   @vespaiach/axios-fetch-adapter@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Is this an issue on my end or does this package need to update its axios dependency?

I understand axios use CancelToken but fetch way is AbortController
Maybe use a different config key or hard wrap of AbortController