CORS hitting locally novu api from react app

Russ Salad · 2024-09-17T15:06:06.052Z

Hey, Im running local novu project with `docker-compose -f docker-compose.yml up` In my react app I'm using Novu Inbox component ``` navigate(path)} /> ``` But I'm receiving CORS error on http://localhost:3001/v1/inbox/session Is it possible to overcome this problem?

P

Pawan Jain•9/18/24, 6:40 AM

@Russ Salad

Can you share .env file values?

R

Russ SaladOP•9/18/24, 9:29 AM

env1.59KB

R

Russ SaladOP•9/23/24, 9:37 AM

Hey @Pawan Jain
do you need anything else?

P

Pawan Jain•9/23/24, 11:34 AM

@Russ Salad

comment this variable
REACT_APP_API_URL=http://localhost:3000

R

Russ SaladOP•9/23/24, 12:07 PM

still the same CORS issue

N

Novu_Bot•9/23/24, 12:07 PM

@Russ Salad, you just advanced to level 1!

R

Russ SaladOP•9/23/24, 12:07 PM

P

Pawan Jain•9/24/24, 4:02 PM

@Russ Salad

Did you try removing all containers and then restarting after this variable change?

P

Pawan Jain•9/24/24, 4:02 PM

I just tested, it is working for me

R

Russ SaladOP•9/24/24, 4:03 PM

yes, did you tried to do it with some separate app?
Because I'm trying to integrate it locally to my app, running novu in parallel

P

Pawan Jain•9/24/24, 4:04 PM

Yeah, it should work

R

Russ SaladOP•9/24/24, 4:05 PM

can you please send me the patch file with the changes that you made to novu codebase?
and steps how you run it?

P

Pawan Jain•9/24/24, 4:06 PM

I did not make any changed to codebase

P

Pawan Jain•9/24/24, 4:10 PM

I am using this example env as it is

# Secrets
# YOU MUST CHANGE THESE BEFORE GOING INTO PRODUCTION
# used as a secret to verify the JWT token signature
JWT_SECRET=your-secret
# used to encrypt/decrypt the provider credentials
STORE_ENCRYPTION_KEY=<ENCRYPTION_KEY_MUST_BE_32_LONG>

# Host
HOST_NAME=http://localhost

# General
# available values 'dev', 'test', 'production', 'ci', 'local'
NODE_ENV=local
MONGO_MAX_POOL_SIZE=200
MONGO_MIN_POOL_SIZE=100
# MONGO USER
MONGO_INITDB_ROOT_USERNAME=root
# MONGO PASSWORD
MONGO_INITDB_ROOT_PASSWORD=secret
MONGO_URL=mongodb://root:secret@mongodb:27017/novu-db?authSource=admin
REDIS_HOST=redis

DOCKER_REDIS_SERVICE_PORT=6379
REDIS_PASSWORD=
REDIS_CACHE_SERVICE_HOST=

# AWS
S3_LOCAL_STACK=$HOST_NAME:4566
S3_BUCKET_NAME=novu-local
S3_REGION=us-east-1
AWS_ACCESS_KEY_ID=test
AWS_SECRET_ACCESS_KEY=test

# Ports
API_PORT=3000
REDIS_PORT=6379
REDIS_CACHE_SERVICE_PORT=6379
WS_PORT=3002

# Root URL
REACT_APP_WS_URL=$HOST_NAME:3002
# Uncomment this one when deploying Novu in the local environment
# as Web app local Dockerfile will have to load this to be used.
# Deployment version doesn't need as we inject it with API_ROOT_URL value.
# REACT_APP_API_URL=http://localhost:3000
API_ROOT_URL=$HOST_NAME:3000
DISABLE_USER_REGISTRATION=false
FRONT_BASE_URL=$HOST_NAME:4200
WIDGET_EMBED_PATH=$HOST_NAME:4701/embed.umd.min.js
WIDGET_URL=$HOST_NAME:4500

# Context Paths
# Only needed for setups with reverse-proxies
GLOBAL_CONTEXT_PATH=
WEB_CONTEXT_PATH=
API_CONTEXT_PATH=
WS_CONTEXT_PATH=
WIDGET_CONTEXT_PATH=

# Analytics
SENTRY_DSN=
# change these values
NEW_RELIC_APP_NAME=
NEW_RELIC_LICENSE_KEY=

IS_MULTI_TENANCY_ENABLED=true

# Secrets
# YOU MUST CHANGE THESE BEFORE GOING INTO PRODUCTION
# used as a secret to verify the JWT token signature
JWT_SECRET=your-secret
# used to encrypt/decrypt the provider credentials
STORE_ENCRYPTION_KEY=<ENCRYPTION_KEY_MUST_BE_32_LONG>

# Host
HOST_NAME=http://localhost

# General
# available values 'dev', 'test', 'production', 'ci', 'local'
NODE_ENV=local
MONGO_MAX_POOL_SIZE=200
MONGO_MIN_POOL_SIZE=100
# MONGO USER
MONGO_INITDB_ROOT_USERNAME=root
# MONGO PASSWORD
MONGO_INITDB_ROOT_PASSWORD=secret
MONGO_URL=mongodb://root:secret@mongodb:27017/novu-db?authSource=admin
REDIS_HOST=redis

DOCKER_REDIS_SERVICE_PORT=6379
REDIS_PASSWORD=
REDIS_CACHE_SERVICE_HOST=

# AWS
S3_LOCAL_STACK=$HOST_NAME:4566
S3_BUCKET_NAME=novu-local
S3_REGION=us-east-1
AWS_ACCESS_KEY_ID=test
AWS_SECRET_ACCESS_KEY=test

# Ports
API_PORT=3000
REDIS_PORT=6379
REDIS_CACHE_SERVICE_PORT=6379
WS_PORT=3002

# Root URL
REACT_APP_WS_URL=$HOST_NAME:3002
# Uncomment this one when deploying Novu in the local environment
# as Web app local Dockerfile will have to load this to be used.
# Deployment version doesn't need as we inject it with API_ROOT_URL value.
# REACT_APP_API_URL=http://localhost:3000
API_ROOT_URL=$HOST_NAME:3000
DISABLE_USER_REGISTRATION=false
FRONT_BASE_URL=$HOST_NAME:4200
WIDGET_EMBED_PATH=$HOST_NAME:4701/embed.umd.min.js
WIDGET_URL=$HOST_NAME:4500

# Context Paths
# Only needed for setups with reverse-proxies
GLOBAL_CONTEXT_PATH=
WEB_CONTEXT_PATH=
API_CONTEXT_PATH=
WS_CONTEXT_PATH=
WIDGET_CONTEXT_PATH=

# Analytics
SENTRY_DSN=
# change these values
NEW_RELIC_APP_NAME=
NEW_RELIC_LICENSE_KEY=

IS_MULTI_TENANCY_ENABLED=true

# Secrets
# YOU MUST CHANGE THESE BEFORE GOING INTO PRODUCTION
# used as a secret to verify the JWT token signature
JWT_SECRET=your-secret
# used to encrypt/decrypt the provider credentials
STORE_ENCRYPTION_KEY=<ENCRYPTION_KEY_MUST_BE_32_LONG>

# Host
HOST_NAME=http://localhost

# General
# available values 'dev', 'test', 'production', 'ci', 'local'
NODE_ENV=local
MONGO_MAX_POOL_SIZE=200
MONGO_MIN_POOL_SIZE=100
# MONGO USER
MONGO_INITDB_ROOT_USERNAME=root
# MONGO PASSWORD
MONGO_INITDB_ROOT_PASSWORD=secret
MONGO_URL=mongodb://root:secret@mongodb:27017/novu-db?authSource=admin
REDIS_HOST=redis

DOCKER_REDIS_SERVICE_PORT=6379
REDIS_PASSWORD=
REDIS_CACHE_SERVICE_HOST=

# AWS
S3_LOCAL_STACK=$HOST_NAME:4566
S3_BUCKET_NAME=novu-local
S3_REGION=us-east-1
AWS_ACCESS_KEY_ID=test
AWS_SECRET_ACCESS_KEY=test

# Ports
API_PORT=3000
REDIS_PORT=6379
REDIS_CACHE_SERVICE_PORT=6379
WS_PORT=3002

# Root URL
REACT_APP_WS_URL=$HOST_NAME:3002
# Uncomment this one when deploying Novu in the local environment
# as Web app local Dockerfile will have to load this to be used.
# Deployment version doesn't need as we inject it with API_ROOT_URL value.
# REACT_APP_API_URL=http://localhost:3000
API_ROOT_URL=$HOST_NAME:3000
DISABLE_USER_REGISTRATION=false
FRONT_BASE_URL=$HOST_NAME:4200
WIDGET_EMBED_PATH=$HOST_NAME:4701/embed.umd.min.js
WIDGET_URL=$HOST_NAME:4500

# Context Paths
# Only needed for setups with reverse-proxies
GLOBAL_CONTEXT_PATH=
WEB_CONTEXT_PATH=
API_CONTEXT_PATH=
WS_CONTEXT_PATH=
WIDGET_CONTEXT_PATH=

# Analytics
SENTRY_DSN=
# change these values
NEW_RELIC_APP_NAME=
NEW_RELIC_LICENSE_KEY=

IS_MULTI_TENANCY_ENABLED=true

# Secrets
# YOU MUST CHANGE THESE BEFORE GOING INTO PRODUCTION
# used as a secret to verify the JWT token signature
JWT_SECRET=your-secret
# used to encrypt/decrypt the provider credentials
STORE_ENCRYPTION_KEY=<ENCRYPTION_KEY_MUST_BE_32_LONG>

# Host
HOST_NAME=http://localhost

# General
# available values 'dev', 'test', 'production', 'ci', 'local'
NODE_ENV=local
MONGO_MAX_POOL_SIZE=200
MONGO_MIN_POOL_SIZE=100
# MONGO USER
MONGO_INITDB_ROOT_USERNAME=root
# MONGO PASSWORD
MONGO_INITDB_ROOT_PASSWORD=secret
MONGO_URL=mongodb://root:secret@mongodb:27017/novu-db?authSource=admin
REDIS_HOST=redis

DOCKER_REDIS_SERVICE_PORT=6379
REDIS_PASSWORD=
REDIS_CACHE_SERVICE_HOST=

# AWS
S3_LOCAL_STACK=$HOST_NAME:4566
S3_BUCKET_NAME=novu-local
S3_REGION=us-east-1
AWS_ACCESS_KEY_ID=test
AWS_SECRET_ACCESS_KEY=test

# Ports
API_PORT=3000
REDIS_PORT=6379
REDIS_CACHE_SERVICE_PORT=6379
WS_PORT=3002

# Root URL
REACT_APP_WS_URL=$HOST_NAME:3002
# Uncomment this one when deploying Novu in the local environment
# as Web app local Dockerfile will have to load this to be used.
# Deployment version doesn't need as we inject it with API_ROOT_URL value.
# REACT_APP_API_URL=http://localhost:3000
API_ROOT_URL=$HOST_NAME:3000
DISABLE_USER_REGISTRATION=false
FRONT_BASE_URL=$HOST_NAME:4200
WIDGET_EMBED_PATH=$HOST_NAME:4701/embed.umd.min.js
WIDGET_URL=$HOST_NAME:4500

# Context Paths
# Only needed for setups with reverse-proxies
GLOBAL_CONTEXT_PATH=
WEB_CONTEXT_PATH=
API_CONTEXT_PATH=
WS_CONTEXT_PATH=
WIDGET_CONTEXT_PATH=

# Analytics
SENTRY_DSN=
# change these values
NEW_RELIC_APP_NAME=
NEW_RELIC_LICENSE_KEY=

IS_MULTI_TENANCY_ENABLED=true

R

Russ SaladOP•9/24/24, 4:16 PM

whats the location of this env file?
And can you please also attach steps how you run the app?

P

Pawan Jain•9/24/24, 4:18 PM

cd docker/community

docker-compose up

cd docker/community

docker-compose up

cd docker/community

docker-compose up

cd docker/community

docker-compose up

R

Russ SaladOP•9/25/24, 12:24 PM

how can I configure api to run on port 3001?
I need 3000 for my app

R

Russ SaladOP•9/25/24, 3:50 PM

I updated Api config to have port 3001 in docker-compose.yml
But from my app on localhost:3000 I still get CORS hitting api on 3001

R

Russ SaladOP•9/26/24, 2:22 PM

@Pawan Jain Am I doing everything correctly?

CORS hitting locally novu api from react app

Similar Threads

Similar Threads

Similar Threads