# Error header CORS

**URL:** <https://community.forestadmin.com/t/error-header-cors/1733>\
**Category:** Help me!\
**Created:** [January 31, 2021, 8:22am UTC](https://community.forestadmin.com/t/error-header-cors/1733 "2021-01-31T08:22:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [January 31, 2021, 8:22am UTC](https://community.forestadmin.com/t/error-header-cors/1733/1 "2021-01-31T08:22:38Z")

</div>

good morning,

I have a local react application that through axios calls a route on (GET) forestadmin implemented on a middleware.  
retrieves some data and makes a post on the forestadmin database.  
unfortunately it doesn’t work and gives me the following error:

Blocked multi-origin request (cross-origin): the origin match criterion does not allow reading of the remote resource from [https://website.com](https://website.com) Reason: missing CORS “Access-Control-Allow-Origin” header.

The forestadmin application is on heroku and the CROSS\_ORIGINS variable is present.

you can help me?

---

<div class="post-metadata">

**Author:** ![anon79585656](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@anon79585656](https://community.forestadmin.com/u/anon79585656)\
**Post date:** [February 1, 2021, 9:43am UTC](https://community.forestadmin.com/t/error-header-cors/1733/2 "2021-02-01T09:43:01Z")

</div>

Hello @cliosuper,

Is this question somewhat related to the thread you previously opened here? [Public route called from outside](https://community.forestadmin.com/t/public-route-called-from-outside/1347)

I get that you want to have another app make a GET call directly on your ForestAdmin agent?

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 1, 2021, 10:01am UTC](https://community.forestadmin.com/t/error-header-cors/1733/3 "2021-02-01T10:01:46Z")

</div>

> [@anon79585656](#):
>
> I get that you want to have another app make a GET call directly on your ForestAdmin agent?

yes correct I need another site to make a GET call on a public route but also a POST call where I have to register the user.  
Currently the GET call is in middleware

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 1, 2021, 10:03am UTC](https://community.forestadmin.com/t/error-header-cors/1733/4 "2021-02-01T10:03:00Z")

</div>

obviously the GET works, if I try to make a POST I have that error or if in the get register to the database the user gives the same error as the CORS

---

<div class="post-metadata">

**Author:** ![anon79585656](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@anon79585656](https://community.forestadmin.com/u/anon79585656)\
**Post date:** [February 1, 2021, 3:04pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/5 "2021-02-01T15:04:54Z")

</div>

If you open the `app.js` file from your ForestAdmin agent, you will find a `allowedOrigins` array definition.

Can you try to add the origin of your POST call in this array? Either directly in the `app.js` file or via the `CORS_ORIGIN` environment variable.

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 1, 2021, 4:13pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/6 "2021-02-01T16:13:01Z")

</div>

ok then I try to add the variable on heroku (the forest admin app resides there remotely for staging) the origin POST localhost:3000 since I am developing locally and then I will change with the remote domain.

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 1, 2021, 7:55pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/7 "2021-02-01T19:55:51Z")

</div>

I tried to insert the variable, on heroku, CORS\_ORIGINS = [http://localhost:3000](http://localhost:3000)  
but keep giving me the usual error …  
as I said I am calling the endpoint of my forestadmin app from an application in react locally

---

<div class="post-metadata">

**Author:** ![Guillaume\_Cisco](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/guillaume_cisco/32/918_2.png) [@Guillaume\_Cisco](https://community.forestadmin.com/u/Guillaume_Cisco)\
**Post date:** [February 2, 2021, 10:51am UTC](https://community.forestadmin.com/t/error-header-cors/1733/8 "2021-02-02T10:51:11Z")

</div>

Hello @cliosuper,

Could we have a diagram of the call requests you are doing?  
If I understand correctly, you have a local react app which make requests to your generated forest admin project.  
And this project is hosted on heroku, right?

Did you try to make requests call with your local react app and a local generated forest admin project?

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 2, 2021, 5:04pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/9 "2021-02-02T17:04:33Z")

</div>

The same problem in locally, gives you the example locally.

app react: [http://localhost](http://localhost): 3001  
make a call to the admin forest app ([http://localhost](http://localhost): 3000)

and the error exits:

Blocked multi-origin request (cross-origin): the origin match criterion does not allow the remote resource to be read from [http://localhost](http://localhost): 3000/invio-form. Reason: missing CORS “Access-Control-Allow-Origin” header.

in my .env file of my forestadmin app I set the variable:  
CORS\_ORIGINS = [http://localhost:3001](http://localhost:3001)

---

<div class="post-metadata">

**Author:** ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)\
**Post date:** [February 4, 2021, 8:17am UTC](https://community.forestadmin.com/t/error-header-cors/1733/10 "2021-02-04T08:17:06Z")

</div>

Hi @cliosuper,

Judging by the error, `Reason: missing CORS “Access-Control-Allow-Origin” header.` is saying that the required header is missing, not that it has an incorrect value.

May I know where you did put your public service (In which file/location)?  
Also, if you are trying to call the service from localhost to heroku server, `Access-Control-Allow-Origin` is required, so that most likely the source of your issue.  
Maybe a browser network tabs screenshot on the failing call would help me to better understand the issue here.

Let me know if that helps

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 4, 2021, 1:11pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/11 "2021-02-04T13:11:50Z")

</div>

Hi jeffladiray, thx for response.

React app code which calls app forest admin on heroku

```javascript
const configHeader = {
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    };
    
    axios.get(process.env.REACT_APP_API_FA + '/invio-form', configHeader, { params: {
      firstname: name, email: email
    } })
      .then(res => {
        // redirect to thank you page
        // window.location.href = ThankYouPage;
        
        console.log(res);
        console.log(res.data);
      })

```

the call is a GET (I had done some tests) which records data on the forest admin db (then I will change it with a POST)

---

<div class="post-metadata">

**Author:** ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)\
**Post date:** [February 4, 2021, 1:19pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/12 "2021-02-04T13:19:57Z")

</div>

I was referring to the code you added on the forest admin backend, not the React one.  
The access `Access-Control-Allow-Origin` header should be on the service response.

To be more specific, you can take a look on any given request of your forestadmin UI done to your backend.  
Depending on where you did put this service on your backend, it might not attach the `Access-Control-Allow-Origin`.

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 4, 2021, 6:58pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/13 "2021-02-04T18:58:47Z")

</div>

I’m sorry but I didn’t understand, if I set the variable on heroku where I insert the url of the app that makes the request is not enough?

This is the code forestadmin

```javascript
const path = require('path');
const models = require('../models');
const superagent = require('superagent');

module.exports = function landingpm(app) {
    app.get('/invio-form', (request, response, next) => {

        const email = request.query['email'];
        const firstname = request.query['name'];

        models.players.findOne({ where: {email: email} })
        .then(function(obj) {
            if(!obj){
                models.players.create({
                    email: email,
                    firstName: firstname, 
                    status: [{name: "1° contatto"}]
                },{ include: [{model: models.statusList, as: "status" }] }).then(function(pl){
                    superagent 
                    .post(process.env.BASE_URL_SB + '/contacts/')
                    .set('api-key', process.env.API_KEY_SB)
                    .set('Accept', 'application/json')
                    .send({
                        attributes: {FIRSTNAME: firstname, WEBSITE: 'namesite'},
                        email: email, updateEnabled: false
                    })
                    .end((err, res) => {
                        if(err){
                            response.send({error: error});
                        }else{
                            response.send({status: "ok"}); 
                        }
                    });
                })
            }else{
                // Insert only sb
                superagent 
                .post(process.env.BASE_URL_SB + '/contacts')
                .set('api-key', process.env.API_KEY_SB)
                .set('Accept', 'application/json')
                .send({
                    attributes: {FIRSTNAME: firstname, WEBSITE: 'namesite'},
                    email: email, updateEnabled: false
                })
                .end((err, res) => {
                    if(err){
                        response.send({error: err});
                    }else{
                        response.send({status: "ok"}); 
                    }
                });
            }
        });

    });
};

```

---

<div class="post-metadata">

**Author:** ![arnaud](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/arnaud/32/32_2.png) [@arnaud](https://community.forestadmin.com/u/arnaud)\
**Post date:** [February 5, 2021, 10:19am UTC](https://community.forestadmin.com/t/error-header-cors/1733/14 "2021-02-05T10:19:52Z")

</div>

Thanks @cliosuper,

It looks like the missing CORS configuration in the code you shared could be the problem.  
It actually depends on the location of this file in your Forest Admin project folder.  
Can you share this location to confirm the origin of the issue?

Thanks for your help to dig into this.

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 5, 2021, 10:33am UTC](https://community.forestadmin.com/t/error-header-cors/1733/15 "2021-02-05T10:33:39Z")

</div>

this file code resides in the forestadmin middlewares folder

---

<div class="post-metadata">

**Author:** ![arnaud](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/arnaud/32/32_2.png) [@arnaud](https://community.forestadmin.com/u/arnaud)\
**Post date:** [February 5, 2021, 10:57am UTC](https://community.forestadmin.com/t/error-header-cors/1733/16 "2021-02-05T10:57:30Z")

</div>

That is not the right place if you want to benefit from the default CORS configuration of your Forest Admin backend.  
I think the place to be, for this file, is `routes` folder (as if you were creating a Smart Action controller, see [documentation](https://docs.forestadmin.com/documentation/reference-guide/actions/create-and-manage-smart-actions#creating-a-smart-action))

Let me know if it helps.

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 5, 2021, 11:24am UTC](https://community.forestadmin.com/t/error-header-cors/1733/17 "2021-02-05T11:24:38Z")

</div>

ok and can I also call it externally to the app from a defined url as it was now?

---

<div class="post-metadata">

**Author:** ![arnaud](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/arnaud/32/32_2.png) [@arnaud](https://community.forestadmin.com/u/arnaud)\
**Post date:** [February 5, 2021, 1:09pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/18 "2021-02-05T13:09:08Z")

</div>

I guess so yes.  
You can try and let us know if you have any issue.

---

<div class="post-metadata">

**Author:** ![cliosuper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/cliosuper/32/1200_2.png) [@cliosuper](https://community.forestadmin.com/u/cliosuper)\
**Post date:** [February 5, 2021, 7:39pm UTC](https://community.forestadmin.com/t/error-header-cors/1733/19 "2021-02-05T19:39:44Z")

</div>

I have created a smart action but how do I reach this route?  
this link: [http://localhost:3310/forest/actions/invio-form-test](http://localhost:3310/forest/actions/invio-form-test)  
it returns a 401 error

this link:  
[http://localhost](http://localhost): 3310/actions/invio-form-test  
I get the error Cannot GET / actions / send-form-test

This is is code forest file:

```javascript
const { collection } = require('forest-express-sequelize');

// This file allows you to add to your Forest UI:
// - Smart actions: https://docs.forestadmin.com/documentation/reference-guide/actions/create-and-manage-smart-actions
// - Smart fields: https://docs.forestadmin.com/documentation/reference-guide/fields/create-and-manage-smart-fields
// - Smart relationships: https://docs.forestadmin.com/documentation/reference-guide/relationships/create-a-smart-relationship
// - Smart segments: https://docs.forestadmin.com/documentation/reference-guide/segments/smart-segments
collection('players', {
  actions: [
    {
      name: "Invio Form Test",
      type: "global"
    }
  ],
  fields: [],
  segments: [],
});

```

This is the code of route file:

```javascript
router.get('/actions/invio-form-test', permissionMiddlewareCreator.smartAction(), (req, res) => {
  res.send('ok');
});

```

Where am I doing wrong?

---

<div class="post-metadata">

**Author:** ![anon94532230](https://avatars.discourse-cdn.com/v4/letter/a/a587f6/32.png) [@anon94532230](https://community.forestadmin.com/u/anon94532230)\
**Post date:** [February 8, 2021, 9:01am UTC](https://community.forestadmin.com/t/error-header-cors/1733/20 "2021-02-08T09:01:35Z")

</div>

Hi @cliosuper !  
It seems the endpoint that you call is not the right one:

> I get the error Cannot GET / actions / send-form-test

You should be calling `actions/invio-form-test` no ?  
You can try to add to use the `endpoint` [option](https://docs.forestadmin.com/documentation/reference-guide/actions/create-and-manage-smart-actions#available-smart-action-options) to make it use the right route.

[Next page](https://community.forestadmin.com/t/error-header-cors/1733.md?page=2)