Fetch works in browser and postman, but not wix

Hi!

I have this fairly simple fetch and I just cannot get it to work. Consol returns:

error: TypeError: Failed to fetch

Using Safari with the URL I can get the data just fine, and using Postman I get it to work with no issues.

Here’s the client-side code:

export async function Uniconta () {

var myHeaders = {'Authorization': 'Basic base64_redacted'};

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
 
};

const httpRes = await fetch("https://odata.uniconta.com/api/Entities/InvItemClient", requestOptions)
  .then(response => response())
  .then(result => console.log(result))
  .catch(err => console.log('error ', err));
}

Does anybody have any ideas?

Not so much ideas as more questions.

wix-fetch seems to generate different output than is expected.

For example I am working on getting this curl statement to work.
(the curl command creates an account successfully on the target server.)

curl -H “Authorization: Token token=R0DnotmykeyFQ” -H “Content-Type: application/json” -d ‘{“sales_account”:{“name”:“Account test”} }’ -X POST “https://ucworkspace.freshsales.io/api/sales_accounts”

When I use a this nice little curl to fetch utility to generate a valid fetch statement: https://kigiri.github.io/fetch/

I get this.


fetch("https://ucworkspace.freshsales.io/api/sales_accounts", {
  body: "{\"sales_account\":{\"name\":\"Account test\"} }",
  headers: {
    Authorization: "Token token=R0DTvnotmykeyPSOBIhFQ",
 "Content-Type": "application/json"
  },
  method: "POST"
})

Then when I put it in the back-end, and add some instrumentation to it I get a
httpResponse.statusText of “Bad Request”

either trivially with no instrumentation

data.js

import {fetch} from 'wix-fetch';

function updateFreshSales(item, context)
{
  fetch("https://ucworkspace.freshsales.io/api/sales_accounts", {
    body: "{\"sales_account\":{\"name\":\"Account test\"} }",
    headers: {
      Authorization: "Token token=R0DTvwXvtnotmykeyhPSOBIhFQ",
 "Content-Type": "application/json"
    },
    method: "POST"
  });
}

or
with error checking

data.js

import {fetch} from'wix-fetch';

function updateFreshSales(item, context)
{
  console.log('function updateFreshSales' );            fetch("https://ucworkspace.freshsales.io/api/sales_accounts", {
    body: "{\"sales_account\":{\"name\":\"Account test\"} }",
    headers: {
      Authorization: "Token token=R0DTvbnotmykeyBIhFQ",
      "Content-Type": "application/json"
    },
    method: "POST"
  })
  .then( (httpResponse) => {
    if (httpResponse.ok) {
      return httpResponse.json();
    } else {
      console.log("Status: " + httpResponse.statusText);
      return Promise.reject("Fetch did not succeed");
    }
  } )
  .then( (json) => console.log(JSON.stringify(json)) )
  .catch(err => console.log(err))
}

The big question I have is wtf is WIX fetch sending? How do we dump the request itself to see what is wrong and work around it? wix-fetch is obviously not as robust as normal fetch but figuring out how so that we can form a valid request seems to be unusually painful.

I’m going to google looking for a developer service that I can send a fetch request to in hope of figuring out what WIX is sending.

I found this web servie https://webhook.site/
It is perfect to see what you are sending.

It took me only a couple of tries to get myself sorted out once I could see what the http request actualy looked like. ( woo hoo! )

I think postman echo can do similar things but I didn’t want to spend the time doing a deep dive into postman.

Hi Robert

I’m noy completely sure what you’re pointing at, but I tried the webhook.site and saw that my reqest does come through as expected.
However ind the javascript console of Chrome I get this error:

Access to fetch at 'https://odata.uniconta.com/api/Entities/InvItemClient?Name=Item&Value=P2212120' from origin 'https://9264ae41-a0d1-4a8a-a1f2-16766b8b8326.dev.wix-code.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

So I set the mode to no-cors, however, that just returns an opaque response from the server…

So I’m back a square one.

Oh… I got it to work.
Did the reqest from the front-end, it has to be on the backend…