Can't Send HTTP Webhook Requests (CORS Config)

Expected behavior

I am looking to be able to successfully send HTTP requests out of forest, and want to understand how to properly set up my Cors config.

Actual behavior

Every time I try to send a request I get the following error:

“Access to XMLHttpRequest at ‘request URL’ 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.”

How do I properly setup my cors config if I’m not using rails? And what url do I need to provide? http://app.forestadmin.com/ , my url on heroku if I’m using that, or my local server if I’m using development?

Thanks in advance!

Context

Please provide any relevant information about your setup.

  • Package Version: 0.0.1
  • Express Version: 4.16.3
  • Sequelize Version: 5.15.1
  • Database Dialect: MySQL2
  • Database Version: 1.7.0

Hello @Matt :wave:

Welcome to our community :confetti_ball:

If I’ve understood correctly, your are the using the feature presented here (making http calls from the Forest UI to other remote instance than your generated project for example)

To allow your browser (app.forestadmin.com) to call either your local instance or your instance in Heroku, you need to add the ForestAdmin domain to your CORS configuration (either on your local instance or on your Heroku remote instance).

If I’m not mistaken, you are currently using the * as value for the Access-Control-Allow-Origin header, which is not authorised in this case (we allow to pass any authentication data that your server might need, if any, such as cookies and so on, which prevents wildcard from being accepted).

Can you try to add https://app.forestadmin.com to your CORS configuration please ?

Keep me in touch :raised_hands:

Steve.

Hey Steve!

Sounds good. How do I add https://app.forestadmin.com to my CORS configuration (where is that?) to both my development/local environment and my heroku/production environment?

This is easily done :

You should have an .env file on both of your environment. In this file, you should see a CORS_ORIGINS variable. You can set it to https://app.forestadmin.com and you should be ready to go :muscle:

Keep me in touch :raised_hands:

Steve.

Gotcha. I added the code to the .env file as follows:

CORS_ORIGINS=https://app.forestadmin.com

But am still getting the error on development. Should my setup have two separate .env files for development and production environments?

So you confirm that for the remote instance it is working, expect for the local one?

If this is the case, the issue might have changed, and the new issue might complain about sending cookie using non https protocol (as while developing, you don’t use ssl certificates).

Can you confirm? Or at least pasting me again the new error message please?

Steve.

It looks like I’m still getting the error in both local and remote environments. I entered in the variable CORS_ORIGINS to equal https://app.forestadmin.com

The error says:

“Access to XMLHttpRequest at ‘webhook URL’ from origin ‘https://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.”

Still working on seeing if it’s something with my env file.

It looks like the changes have not been taken into account.

Can you confirm you restarted your servers after the changes?

I have restarted my local server and deployed a test to my remote server and am currently still getting the error still. Working on my end to make sure that I’m not missing anything.

Got it working! Looks like it was the way the request syntax was structured. Thank you so much for your help! This opened up a lot of doors for us to utilize Forest even more!

3 Likes