CODEWITHSUNDEEP
phpreactjsaxiosfetch
Dang Kien
Dang Kien

Reputation: 688

axios/ fetch failed but postman work with php api

I got stuck when calling php api with form-data type in my React app. When I test with Postman, it works correctly but failed in react.

Please let me know if I'm doing wrong here. In Postman, call api like this:

URl_API: xxxx/yyyy.php.
Config in Body tab in key/value: form-data
k: "some string"
id: "some string"

With axios, I had an error:

My code:

const formData = new FormData()
  formData.append('k', 'some string')
  formData.append('id', 'some string')

  const response = await axios.post('xxxx/yyyy.php', formData, {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  })

xxxx/yyyy.php net::ERR_HTTP2_PROTOCOL_ERROR

I had already tried with fetch but no luck - call api success with status 200 but the response.text() is empty. With fetch api:

const result = await fetch('xxxx/yyyy.php', {
    method: 'POST',
    mode: 'no-cors',
    body: formData,
    cache: 'no-cache',
  })
    .then(async (res) => {
      return res.text()
    })
    .then((text) => console.log('It is empty here', text))

Upvotes: 0

Views: 266

Answers (1)

Azzy
Azzy

Reputation: 1731

It look like a CORS also, but you will be able to sort it out

a simple solution in development is to use a local api server, and finally when the app is deployed to the server which is on the same domain as the api, you should get the response, as demonstrated below by making the calls using dev tools.

in short: if a api calls work with postman but not through the browser, its mostly due to cors restrictions, then it could be the response type

Verifying cors issue by making calls throught dev tools

 let onSubmit = async () => {
    try {
      const url = "https://www.your-domain***.com/getUrlApp.php";

      const formData = new FormData();
      formData.append("k", "kk");
      formData.append("id", "dd");
      const data = new URLSearchParams(formData);

      const response = await fetch(url, {
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "no-cors", // no-cors, *cors, same-origin
        body: data // body data type must match "Content-Type" header
      });

      //const res = response.json();
      const buffer = await response.arrayBuffer();

      const decoder = new TextDecoder("iso-8859-1");
      const text = decoder.decode(buffer);

      console.log("text", text);

      return response;
    } catch (error) {
      console.log("error", error);
    }
  };

To verify the response

  • go https://www.your-domain***.com

  • open dev tools => console

  • past the function above and run it by typing onSubmit() in the console

you will see the response

Hope it helps you in some way

enter image description here

Upvotes: 1

Related Questions