CORS issue trying to send POST request with Webhook in Smart Actions

Help me!
1

Hi !

I’m trying to send data in a smart action to a webhook. The smart action is working well so far but I can’t send data to the webhook, because of a CORS issue.

Another user had the exact same problem as me (see following thread), and I followed the instructions, but the CORS error is still there.

I’ve correctly added CORS_ORIGINS=http://app.forestadmin.com in my .env file. Here is the error:

Access to XMLHttpRequest at 'https://webhook.site/5bd9b4d2-8804-4412-9baf-463289675b1f' from origin 'http://app.forestadmin.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Here is my smart action in forest/phase.js

collection('phase', {
  actions: [{
    name: 'Activate phase'
  }],
  fields: [],
  segments: [],
});

The webhook called in routes/phase.js

router.post('/actions/activate-phase', permissionMiddlewareCreator.smartAction(), (req, res) =>  {
  // Learn what this route does here: https://docs.forestadmin.com/documentation/v/v6/reference-guide/routes/default-routes#delete-a-list-of-records
  res.send({
    webhook: { // This is the object that will be used to fire http calls.
      url: 'https://webhook.site/5bd9b4d2-8804-4412-9baf-463289675b1f', // The url of the company providing the service.
      method: 'POST', // The method you would like to use (typically a POST).
      headers: { },
      body: { // A body to send to the url (only JSON supported).
        someDatas: 'some_datas',
      },
    },
  });
});

Context

  • Package Version: 3.4 (not sure about that one, I took the version inside the docker-compose file)
  • Express Version: ~4.17.1
  • Sequelize Version: ~5.15.1
  • Database Dialect: postgresql
  • Database Version:
  • Project Name: traderlift-backoffice
2

Hello @Le_Segretain_Maxime, welcome to the Forest Admin community :tada:

Did you authorize http://app.forestadmin.com and https://app.forestadmin.com in the CORS configuration of the server running the webhook.site domain?
It looks like webhook.site has a CORS policy set to *, which won’t work with Forest Admin, as credentials mode is ‘include’. Could you review the CORS policy of webhook.site domain?

Let me know :slight_smile:

3

Hi @Guillaume_Cisco and thanks for the quick reply (and the warm welcome :smiley: )

Since webhook.site is just a free “sandbox”, I don’t have any control on their CORS policy.

So I decided to switch to my real app, which is a nestjs app, with another endpoint :

http://localhost:3000/stripe/test_webhook

Here is the config I’m using :

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const options = {
    origin: ["http://localhost:8080", "http://localhost:3000", "http://app.forestadmin.com", "https://app.forestadmin.com" ],
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: true,
    optionsSuccessStatus: 200,
    credentials: true,
  };
  app.enableCors(options);
  await app.listen(3000);
}
bootstrap();

There is a new error now :

Access to XMLHttpRequest at 'http://localhost:3000/stripe/test_webhook' from origin 
'http://app.forestadmin.com' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
4

I fixed the issue myself. I can receive data now

For any other nestjs / nodejs user, here’s the config on my backend that fixed my problem, if someone is encoutering the same issue :smiley:

  const app = await NestFactory.create(AppModule);
  const options = {
    origin: ["http://localhost:8080", "http://localhost:3000", "http://app.forestadmin.com", "https://app.forestadmin.com" ],
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: false,
    optionsSuccessStatus: 204,
    credentials: true,
  };
  app.enableCors(options);
  await app.listen(3000);
1 Like