-1

My API is not accepting requests from the domain set on the cors origin config

Relevant api code

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.enableCors({ 
    origin: 'https://finad.devluis.tech',
    allowedHeaders: [
      'Content-Type'
    ],
    credentials: true,
  });

  await app.listen(process.env.PORT || 8888);
}

Relevant web app code

  const submitForm = async (e: FormEvent) => {
    e.preventDefault();

    await fetch(`https://api.finad.devluis.tech/user`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: `${name} ${lastName}`,
        email: email,
        password: password
      })
    });
  }

If i remove the allowedHeaders part from my cors config, and the headers from the web app request it does not return me an error, but the body of the request is lost

I'm getting both this errors, one for each request (options and post)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.finad.devluis.tech/user. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.finad.devluis.tech/user. (Reason: CORS request did not succeed). Status code: (null).

Maybe relevant data:

  • both the apps are hosted on Vercel
  • my API is in the subdomain api.finad.devluis.tech
  • my Webapp is in the subdomain finad.devluis.tech
Luís Felipe de Souza Silva
  • 129
  • 1
  • 2
  • 6
  • 1
    `If i remove the allowedHeaders part from my cors config, and the headers from the web app request it does not return me an error, but the body of the request is lost` What do you mean the body of the request is lost? Is this the body of the POST request or the OPTIONS request? – Michael Pu Jan 07 '23 at 22:08
  • the body of the POST request. apparently the default Content-Type is 'text/plain', if i don't allow it to receive other types, the api does not understand that i'm sending a json as the body, not allowing me to retrieve this data on the API, the body is just and empty object – Luís Felipe de Souza Silva Jan 07 '23 at 22:16
  • Can you also include the relevant API code that reads and parses the request? – Michael Pu Jan 07 '23 at 22:48
  • i have a question about this, here's the [link](https://stackoverflow.com/questions/75037929/request-body-vanishes-on-api) but as you can see in the response. it sends as text/plain, even though my body is parsed as json – Luís Felipe de Souza Silva Jan 07 '23 at 23:07
  • 1
    You may need to enable CORS on the web app side by adding `mode: 'cors'` to the config you pass into the `fetch` method. If the `mode` isn't set to `cors`, the browser may send it as `text/plain` instead of `application/json` (see https://stackoverflow.com/a/54016415/13690747) – Michael Pu Jan 07 '23 at 23:11
  • When you include the `allowedHeaders` part of the cors config, what is the value of the `Content-Type` header in the request on the API side? – Michael Pu Jan 07 '23 at 23:18
  • Thank you! it worked. I can get the data, but the header is being sent as text/plain. the express is configuration is making it to be a json so its parsed. – Luís Felipe de Souza Silva Jan 07 '23 at 23:59

1 Answers1

1

So i just figured it out after 7 hours on this error
And basically the problem was: my vercel.json file did not make the OPTIONS routes available, so everytime a preflight request was sent, it kept returning a 404, causing the browser to think it was a CORS error.

I think this is an specific case for deploys on vercel, so here's my vercel.json file

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "DELETE",
        "OPTIONS"
      ]
    }
  ]
}

just to clarify, im using nestjs

Luís Felipe de Souza Silva
  • 129
  • 1
  • 2
  • 6