How would you make this post request

Question

How would you make this post request considering that the documentation is showing you this

POST /cf HTTP/1.1
Host: apis.woptima.com
Content-Type: application/json

{
    "name": "franco",
    "surname": "Baldi",
    "gender": "M",
    "day": 22,
    "month": 12,
    "year": 1980,
    "city": "Roma",
    "province": "RM"
}

I tried my way and dind't work out, I get validationError 422

fetch("https://cors-anywhere.herokuapp.com/https://apis.woptima.com/cf", {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: POST,
                  // I also tried with the body object, didn't work
      name: "franco",
      surname: "Baldi",
      gender: "M",
      day: 22,
      month: 12,
      year: 1980,
      city: "Roma",
      province: "RM",
    })
      .then(function (response) {
        return response.json()
      })
      .then(function (data) {
        console.log(data)
      })
  }

If you can help me I will appreciate

You should always open the developer tools and check the _console_ tab for errors — Alon Eitan, Jan 01 '21 at 09:43
I'm now getting this error Access to fetch at 'apis.woptima.com/cf' from origin 'prolocofraine.netlify.app' 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 — Vincenzo, Jan 01 '21 at 10:37

Aalexander · Answer 1 · 2021-01-01T21:07:51.457

1

First you have a typo you have to enclose the POST --> method="POST"

The error means that the server don't understand your content type referencing the mozilla developer docs

The HyperText Transfer Protocol (HTTP) 422 Unprocessable Entity response status code indicates that the server understands the content type of the request entity, and the syntax of the request entity is correct, but it was unable to process the contained instruction

You can also use async / await like in the example below

async function addData(){

      const name: "franco",
      const surname: "Baldi",
      const gender: "M",
      const day: 22,
      const month: 12,
      const year: 1980,
      const city: "Roma",
      const province: "RM",
    
   
        const data = {name, surname, gender, day, month, year, city, province};
        const options = {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
            },
            // here you parse your data as string before sending
            body: JSON.stringify(data)
        };
        await fetch('https://cors-anywhere.herokuapp.com/https://apis.woptima.com/cf', options); 
    }

You can call this function where you would like to add this data.

edited Jan 01 '21 at 21:07

answered Jan 01 '21 at 09:38

Aalexander

4,987
3
11
34

``` var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/json"); var raw = JSON.stringify({"name":"franco","surname":"Baldi","gender":"M","day":22,"month":12,"year":1980,"city":"Roma","province":"RM"}); var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; fetch("https://apis.woptima.com/cf", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error)); ``` – Vincenzo Jan 01 '21 at 10:11
1

You are welcome :) What do you mean with this code? – Aalexander Jan 01 '21 at 10:13
1

It is something I got from POSTMAN It might be useful as well. Comments are not the place to send these :) – Vincenzo Jan 01 '21 at 10:14
1

I'm now getting this error Access to fetch at 'https://apis.woptima.com/cf' from origin 'https://prolocofraine.netlify.app' 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 – Vincenzo Jan 01 '21 at 10:35
1

The first answer on this post might be helpful https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i The reason is probably that you do a post request to a different domain which will be blocked – Aalexander Jan 01 '21 at 10:41
Great answers there. I didn't use the heroku proxy yet... – Vincenzo Jan 01 '21 at 10:49
I think it should also be possible with heroku. – Aalexander Jan 05 '21 at 13:46

How would you make this post request

1 Answers1