posva / mande

<700 bytes convenient and modern wrapper around fetch with smart extensible defaults
https://mande.esm.is
MIT License
1.19k stars 42 forks source link

Promise exception with 200 query #345

Closed loranger closed 1 year ago

loranger commented 2 years ago

Hello,

I'm sorry to bother, but I try to use mande for a simple 3D printer monitoring status service. This printer runs locally, so I cannot provide any public snippet, but I'll try to explain as mush as I can.

I'm building a vue.js app requesting an auth token. This is the way I did instanciate mande (from pinia):

import { mande } from "mande";

...

const api = mande(`http://${config.host}:${config.port}/api/v1/connect`, {
  mode: "no-cors",
});

...

const formData = new FormData();
formData.append("token", config.token);
api.options.body = formData;

...

api.post()
.then((response) => {
  console.log(response);
})
.catch((err) => {
  console.log(err);
})

I can't figure out why, even if the request seems legit and valid, returning a 200 status code and a json object, mande/fetch throws an exception

SCR-20220906-x07

Error: 
    _fetch mande.mjs:110
    promise callback*_fetch mande.mjs:103
    getToken connection.js:36
    wrapAction pinia.mjs:1359
    actionName pinia.mjs:917
    ConnectionStore connection.js:59
    setup App.vue:9
    callWithErrorHandling runtime-core.esm-bundler.js:155
    setupStatefulComponent runtime-core.esm-bundler.js:7186
    setupComponent runtime-core.esm-bundler.js:7141
    mountComponent runtime-core.esm-bundler.js:5493
    processComponent runtime-core.esm-bundler.js:5468
    patch runtime-core.esm-bundler.js:5058
    render2 runtime-core.esm-bundler.js:6229
    mount runtime-core.esm-bundler.js:4422
    mount runtime-dom.esm-bundler.js:1606
    <anonymous> main.ts:12
[connection.js:42:23](http://localhost:5173/src/stores/connection.js?t=1662500438085)

It may be a begginer error or something, but what did I miss ?

loranger commented 2 years ago

It seems it's related to cors and setting a no-cors mode does not help, but I cannot figure out how I can consume this local server api with mande… Maybe by using a proxy? Is there a favorite mande proxy package? Or maybe a mande jsonp usage?

posva commented 1 year ago

You should do api.post(formData) instead of api.options.body = formData;. In this scenario the types should prove helpful to debug and they should forbid invalid actions like setting the body in options.