Novu•4mo ago

CORS hitting locally novu api from react app

Hey, Im running local novu project with docker-compose -f docker-compose.yml up In my react app I'm using Novu Inbox component

<NovuProvider
  backendUrl="http://localhost:3001"
  socketUrl="http://localhost:3002"
  subscriberId={'on-boarding-subscriber-id-123'}
  applicationIdentifier={'czg1gd4g3AQF'}
>
  <Inbox
    applicationIdentifier="czg1gd4g3AQF"
    subscriberId="66e2f3cdffbfba3cb15cba7f"
    routerPush={(path: string) => navigate(path)}
  />
</NovuProvider>

<NovuProvider
  backendUrl="http://localhost:3001"
  socketUrl="http://localhost:3002"
  subscriberId={'on-boarding-subscriber-id-123'}
  applicationIdentifier={'czg1gd4g3AQF'}
>
  <Inbox
    applicationIdentifier="czg1gd4g3AQF"
    subscriberId="66e2f3cdffbfba3cb15cba7f"
    routerPush={(path: string) => navigate(path)}
  />
</NovuProvider>

But I'm receiving CORS error on http://localhost:3001/v1/inbox/session Is it possible to overcome this problem?

17 Replies

Pawan Jain•4mo ago

@Russ Salad Can you share .env file values?

Russ SaladOP•4mo ago

env

Russ SaladOP•3mo ago

Hey @Pawan Jain do you need anything else?

Pawan Jain•3mo ago

@Russ Salad comment this variable REACT_APP_API_URL=http://localhost:3000

Russ SaladOP•3mo ago

still the same CORS issue

Novu_Bot•3mo ago

@Russ Salad, you just advanced to level 1!

Russ SaladOP•3mo ago

Pawan Jain•3mo ago

@Russ Salad Did you try removing all containers and then restarting after this variable change? I just tested, it is working for me

Russ SaladOP•3mo ago

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

Pawan Jain•3mo ago

Yeah, it should work

Russ SaladOP•3mo ago

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

Pawan Jain•3mo ago

I did not make any changed to codebase 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

Russ SaladOP•3mo ago

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

Pawan Jain•3mo ago

cd docker/community

docker-compose up

cd docker/community

docker-compose up

Russ SaladOP•3mo ago

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

Russ SaladOP•3mo ago

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

Russ SaladOP•3mo ago

@Pawan Jain Am I doing everything correctly?

Gaming

Programming

CORS hitting locally novu api from react app