Question 33459 in React native Question posted in
The official React Native documentation can be found here.

Nestjs app triggering CORS error despite CORS being enabled – React native

I’m building a relatively simple React Native app with a nestjs backend.

My React Native app is making a POST request to localhost:3000/blah. This results in this error:

Access to fetch at 'http://localhost:3000/blah' from origin 'http://localhost:19006' 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.

On the nestjs backend side, in main.ts before await app.listen(3000);, I have tried the following:

  app.enableCors();

as well as

  app.enableCors({
    allowedHeaders: ['content-type', 'Access-Control-Allow-Origin'],
    origin: "http://localhost:19006",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS",
    preflightContinue: true,
    optionsSuccessStatus: 204,
  });

But both still result in the same error on the client.

The only thing that seems to fix it is if the app makes the request with

...fetch(URL, {mode: 'no-cors', ...})

but that isn’t the most secure, from my understanding.

Am I missing something about how CORS works?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Answering my own question: I was doing something silly elsewhere and the problem had little to do with CORS. In the end, modifying my main.ts file in the nestjs backend in this simple way did work, as suggested by the internet:

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

  app.enableCors();

  await app.listen(3000);
}
bootstrap();

    The reason it didn't seem like it was working at first was because I don't think nestjs was automatically rebuilding all the backend files correctly upon any edit as it should. This is because, in the process of trying to fix something else, I modified my tsconfig.json file in the backend to include this:

    include: []

    In retrospect this was a bit silly - this means that none of my typescript files were being compiled! The symptom of this was that my backend/dist/ directory was empty, and when I tried to run npm build, the backend complained that nothing was in backend/dist/.

    Weirdly enough, under the wrong configuration, I ended up in a state where the frontend would complain of a CORS problem, but the backend would continue to get the right API call (as evidenced by tripping a debugger), but the POST requests's body wasn't coming through.

    Hope this helps somebody in the future work through their problem! app.enableCors() did do the trick for me here.


  2. 0

    Better approach while development process is proxy. you can configure it in your vite.config.ts file. please read this link, and prevent cors error. Also you can try this option instead of app.enableCors();

    const app = await NestFactory.create(AppModule, { cors: true });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search