CORS

[shadowTW]

Describe the bug

CORS

Expected behavior

Access to fetch at 'https://aniwatch-git-main-shadowtws-projects.vercel.app/api/v2/hianime/search?q=re&page=1' from origin 'https://backend.oblivion.wtf' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Actual behavior

Access to fetch at 'https://aniwatch-git-main-shadowtws-projects.vercel.app/api/v2/hianime/search?q=re&page=1' from origin 'https://backend.oblivion.wtf' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Additional context

port number of the aniwatch api

ANIWATCH_API_PORT=4000

env to control allowed origins

ANIWATCH_API_CORS_ALLOWED_ORIGINS=https://backend.oblivion.wtf,https://oblivion.wtf

RATE LIMIT

duration to track requests (in milliseconds) for rate limiting. here, 30601000 = 1800000 = 30 minutes

ANIWATCH_API_WINDOW_MS=1800000

maximum number of requests in this timeperiod

ANIWATCH_API_MAX_REQS=70

CAUTION:

For personal deployments, if you wanna have rate limitting

in your application, then set the env below to your deployed

instance's hostname, otherwise don't set or have it at all.

If you set the env below to an incorrect value, you may face other issues.

ANIWATCH_API_HOSTNAME=https://your-production-domain.com

NOTE: this env is "required" for vercel deployments

ANIWATCH_API_VERCEL_DEPLOYMENT=true

env to use optional redis caching functionality

ANIWATCH_API_REDIS_CONN_URL=rediss://default:[email protected]:6379

Cache-Control settings for Vercel Edge Caching

Specifies the maximum amount of time (in seconds) a resource is considered fresh when served by a CDN cache.

ANIWATCH_API_S_MAXAGE=60

Specifies the amount of time (in seconds) a resource is served stale while a new one is fetched.

ANIWATCH_API_STALE_WHILE_REVALIDATE=30

[shadowTW]

ANIWATCH_API_PORT=4000

# env to control allowed origins
ANIWATCH_API_CORS_ALLOWED_ORIGINS=<https://backend.oblivion.wtf,https://oblivion.wtf>

# RATE LIMIT
# duration to track requests (in milliseconds) for rate limiting. here, 30*60*1000 = 1800000 = 30 minutes
ANIWATCH_API_WINDOW_MS=1800000 
# maximum number of requests in this timeperiod
ANIWATCH_API_MAX_REQS=70 

# CAUTION: 
#   For personal deployments, if you wanna have rate limitting
#   in your application, then set the env below to your deployed 
#   instance's hostname, otherwise don't set or have it at all.
#   If you set the env below to an incorrect value, you may face other issues.
# ANIWATCH_API_HOSTNAME=<https://your-production-domain.com>


# NOTE: this env is "required" for vercel deployments
ANIWATCH_API_VERCEL_DEPLOYMENT=true

# env to use optional redis caching functionality
# ANIWATCH_API_REDIS_CONN_URL=<rediss://default:[email protected]:6379>

# Cache-Control settings for Vercel Edge Caching
# Specifies the maximum amount of time (in seconds) a resource is considered fresh when served by a CDN cache.
ANIWATCH_API_S_MAXAGE=60
# Specifies the amount of time (in seconds) a resource is served stale while a new one is fetched.
ANIWATCH_API_STALE_WHILE_REVALIDATE=30```

[shadowTW]

Am I doing smth wrong?

[shadowTW]

https://cors-test.codehappy.dev/?url=https%3A%2F%2Faniwatch-git-main-shadowtws-projects.vercel.app%2Fapi%2Fv2%2Fhianime%2Fsearch%3Fq%3Dre%26page%3D1&origin=https%3A%2F%2Fbackend.oblivion.wtf%2F&method=get

[ghoshRitesh12]

Am I doing smth wrong?

Does your ANIWATCH_API_CORS_ALLOWED_ORIGINS env have the angled brackets in them? If so remove them and try again.

[shadowTW]

i've tried but the same, I tried to assign * for the cors but still the same

[shadowTW]

with

import { config } from "dotenv";
import { cors } from "hono/cors";

config();

const allowedOrigins = process.env.ANIWATCH_API_CORS_ALLOWED_ORIGINS
  ? process.env.ANIWATCH_API_CORS_ALLOWED_ORIGINS.split(",")
  : ["http://localhost:4000", "*"];

const corsConfig = cors({
  allowMethods: ["GET"],
  maxAge: 600,
  credentials: true,
  origin: "*",
});

export default corsConfig;

works properly maybe its a issue in the env

[shadowTW]

# port number of the aniwatch api
ANIWATCH_API_PORT=4000

# env to control allowed origins
ANIWATCH_API_CORS_ALLOWED_ORIGINS=https://backend.oblivion.wtf,https://oblivion.wtf

# RATE LIMIT
# duration to track requests (in milliseconds) for rate limiting. here, 30*60*1000 = 1800000 = 30 minutes
ANIWATCH_API_WINDOW_MS=1800000 
# maximum number of requests in this timeperiod
ANIWATCH_API_MAX_REQS=70 

# CAUTION: 
#   For personal deployments, if you wanna have rate limitting
#   in your application, then set the env below to your deployed 
#   instance's hostname, otherwise don't set or have it at all.
#   If you set the env below to an incorrect value, you may face other issues.
# ANIWATCH_API_HOSTNAME=<https://your-production-domain.com>


# NOTE: this env is "required" for vercel deployments
ANIWATCH_API_VERCEL_DEPLOYMENT=true

# env to use optional redis caching functionality
# ANIWATCH_API_REDIS_CONN_URL=<rediss://default:[email protected]:6379>

# Cache-Control settings for Vercel Edge Caching
# Specifies the maximum amount of time (in seconds) a resource is considered fresh when served by a CDN cache.
ANIWATCH_API_S_MAXAGE=60
# Specifies the amount of time (in seconds) a resource is served stale while a new one is fetched.
ANIWATCH_API_STALE_WHILE_REVALIDATE=30

[ghoshRitesh12]

# port number of the aniwatch api
ANIWATCH_API_PORT=4000

# env to control allowed origins
ANIWATCH_API_CORS_ALLOWED_ORIGINS=https://backend.oblivion.wtf,https://oblivion.wtf

# RATE LIMIT
# duration to track requests (in milliseconds) for rate limiting. here, 30*60*1000 = 1800000 = 30 minutes
ANIWATCH_API_WINDOW_MS=1800000 
# maximum number of requests in this timeperiod
ANIWATCH_API_MAX_REQS=70 

# CAUTION: 
#   For personal deployments, if you wanna have rate limitting
#   in your application, then set the env below to your deployed 
#   instance's hostname, otherwise don't set or have it at all.
#   If you set the env below to an incorrect value, you may face other issues.
# ANIWATCH_API_HOSTNAME=<https://your-production-domain.com>


# NOTE: this env is "required" for vercel deployments
ANIWATCH_API_VERCEL_DEPLOYMENT=true

# env to use optional redis caching functionality
# ANIWATCH_API_REDIS_CONN_URL=<rediss://default:[email protected]:6379>

# Cache-Control settings for Vercel Edge Caching
# Specifies the maximum amount of time (in seconds) a resource is considered fresh when served by a CDN cache.
ANIWATCH_API_S_MAXAGE=60
# Specifies the amount of time (in seconds) a resource is served stale while a new one is fetched.
ANIWATCH_API_STALE_WHILE_REVALIDATE=30

is it working now with the updated env or is there a problem?

[shadowTW]

the env isn't working i'll rather use it direct in the code the origins
like

import { cors } from "hono/cors";

config();

const allowedOrigins = process.env.ANIWATCH_API_CORS_ALLOWED_ORIGINS
  ? process.env.ANIWATCH_API_CORS_ALLOWED_ORIGINS.split(",")
  : ["http://localhost:4000", "*"];

const corsConfig = cors({
  allowMethods: ["GET"],
  maxAge: 600,
  credentials: true,
  origin: "*",
});