Thiết kế website giá rẻ

Question

I’m facing CORS error in the production, I’ve setup the Hono API routes, and it is working perfect locally, I’m not facing any CORS errors. After deployment to the VERCEL, I’m facing issue.

I added HONO Cors middleware, but seem it is not helping me. Still facing the same issue.

srcappapi[[…route]]route.ts

import { AuthConfig, initAuthConfig } from "@hono/auth-js";
import { Context, Hono } from "hono";

import ai from "./ai";
import authConfig from "@/auth.config";
import { cors } from "hono/cors";
import { handle } from "hono/vercel";
import images from "./images";
import projects from "./projects";
import subscriptions from "./subscriptions";
import users from "./users";

// Revert to "edge" if planning on running on the edge
export const runtime = "nodejs";

function getAuthConfig(c: Context): AuthConfig {
    return {
        secret: c.env.AUTH_SECRET,
        ...authConfig,
    };
}

const app = new Hono().basePath("/api");

// Add CORS middleware
app.use(
    "*",
    cors({
        origin: [
            "example.com,
            "http://localhost:3000",
            ,
        ],
        allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
        allowHeaders: ["Origin", "Content-Type", "Accept", "Authorization"],
        exposeHeaders: ["Content-Length", "X-Kuma-Revision"],
        maxAge: 600,
        credentials: true,
    }),
);

app.use("*", initAuthConfig(getAuthConfig));

const routes = app
    .route("/ai", ai)
    .route("/users", users)
    .route("/images", images)
    .route("/projects", projects)
    .route("/subscriptions", subscriptions);

export const GET = handle(app);
export const POST = handle(app);
export const PATCH = handle(app);
export const DELETE = handle(app);
export const OPTIONS = handle(app);

export type AppType = typeof routes;

srcauth.config.ts

import { z } from "zod";
import bcrypt from "bcryptjs";
import type { NextAuthConfig } from "next-auth";
import { eq } from "drizzle-orm";
import { JWT } from "next-auth/jwt";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";
import Credentials from "next-auth/providers/credentials";
import { DrizzleAdapter } from "@auth/drizzle-adapter";

import { db } from "@/db/drizzle";
import { users } from "@/db/schema";

const CredentialsSchema = z.object({
    email: z.string().email(),
    password: z.string(),
});

declare module "next-auth/jwt" {
    interface JWT {
        id: string | undefined;
    }
}

declare module "@auth/core/jwt" {
    interface JWT {
        id: string | undefined;
    }
}

export default {
    adapter: DrizzleAdapter(db),
    providers: [
        Credentials({
            credentials: {
                email: { label: "Email", type: "email" },
                pasword: { label: "Password", type: "password" },
            },
            async authorize(credentials) {
                const validatedFields = CredentialsSchema.safeParse(credentials);

                if (!validatedFields.success) {
                    return null;
                }

                const { email, password } = validatedFields.data;

                const query = await db
                    .select()
                    .from(users)
                    .where(eq(users.email, email));

                const user = query[0];

                if (!user || !user.password) {
                    return null;
                }

                const passwordsMatch = await bcrypt.compare(password, user.password);

                if (!passwordsMatch) {
                    return null;
                }

                return user;
            },
        }),
        GitHub,
        Google,
    ],
    pages: {
        signIn: "/sign-in",
        error: "/sign-in",
    },
    session: {
        strategy: "jwt",
    },
    callbacks: {
        session({ session, token }) {
            if (token.id) {
                session.user.id = token.id;
            }

            return session;
        },
        jwt({ token, user }) {
            if (user) {
                token.id = user.id;
            }

            return token;
        },
    },
} satisfies NextAuthConfig;

This is the Error OUPUT when trying to fetch the project in the production.


[domainname-comes-here]/:1 Access to fetch at '[domainname-comes-here]/api/subscriptions/current' from origin '[domainname-comes-here]' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
396-eb6a447ec845df42.js:1 
        
        
       GET [domainname-comes-here]/api/subscriptions/current net::ERR_FAILED
fetch @ 396-eb6a447ec845df42.js:1
n @ 396-eb6a447ec845df42.js:1
apply @ 396-eb6a447ec845df42.js:1
queryFn @ layout-753ac6ae7a3ed00b.js:1
fetchFn @ 142-f615ccfff07097f4.js:1
g @ 396-eb6a447ec845df42.js:1
start @ 396-eb6a447ec845df42.js:1
fetch @ 142-f615ccfff07097f4.js:1
#p @ 946-a5724ebb3711ec46.js:6
onSubscribe @ 946-a5724ebb3711ec46.js:6
subscribe @ 396-eb6a447ec845df42.js:1
(anonymous) @ 946-a5724ebb3711ec46.js:6
rQ @ f37397fd-b5ecfc9c437c1a0f.js:1
aW @ f37397fd-b5ecfc9c437c1a0f.js:1
oe @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
id @ f37397fd-b5ecfc9c437c1a0f.js:1
nb @ f37397fd-b5ecfc9c437c1a0f.js:1
(anonymous) @ f37397fd-b5ecfc9c437c1a0f.js:1
is @ f37397fd-b5ecfc9c437c1a0f.js:1
o1 @ f37397fd-b5ecfc9c437c1a0f.js:1
oZ @ f37397fd-b5ecfc9c437c1a0f.js:1
T @ 13-ea30d20241acaa13.js:1
[domainname-comes-here]/:1 Access to fetch at '[domainname-comes-here]/api/projects/templates?page=1&limit=4' from origin '[domainname-comes-here]' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
396-eb6a447ec845df42.js:1 
        
        
       GET [domainname-comes-here]/api/projects/templates?page=1&limit=4 net::ERR_FAILED
fetch @ 396-eb6a447ec845df42.js:1
n @ 396-eb6a447ec845df42.js:1
apply @ 396-eb6a447ec845df42.js:1
queryFn @ page-64202354d8452a45.js:1
fetchFn @ 142-f615ccfff07097f4.js:1
g @ 396-eb6a447ec845df42.js:1
start @ 396-eb6a447ec845df42.js:1
fetch @ 142-f615ccfff07097f4.js:1
#p @ 946-a5724ebb3711ec46.js:6
onSubscribe @ 946-a5724ebb3711ec46.js:6
subscribe @ 396-eb6a447ec845df42.js:1
(anonymous) @ 946-a5724ebb3711ec46.js:6
rQ @ f37397fd-b5ecfc9c437c1a0f.js:1
aW @ f37397fd-b5ecfc9c437c1a0f.js:1
oe @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
or @ f37397fd-b5ecfc9c437c1a0f.js:1
ol @ f37397fd-b5ecfc9c437c1a0f.js:1
id @ f37397fd-b5ecfc9c437c1a0f.js:1
nb @ f37397fd-b5ecfc9c437c1a0f.js:1
(anonymous) @ f37397fd-b5ecfc9c437c1a0f.js:1
is @ f37397fd-b5ecfc9c437c1a0f.js:1
o1 @ f37397fd-b5ecfc9c437c1a0f.js:1
oZ @ f37397fd-b5ecfc9c437c1a0f.js:1
T @ 13-ea30d20241acaa13.js:1
[domainname-comes-here]/:1 Access to fetch at '[domainname-comes-here]/api/projects?page=1&limit=5' from origin '[domainname-comes-here]' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
396-eb6a447ec845df42.js:1 
        
        
       GET [domainname-comes-here]/api/projects?page=1&limit=5 net::ERR_FAILED

For the context, I’ve added mydomain name to the vercel by addding VERCEL DNS, Then for the landing page, I’ve connected my domain.com and for my app, I’ve connected app.mydomain.com, They both are different repositories. So it it related to that?

Thiết kế website giá rẻ

Danh mục

Facing CORS Error in my NextJS app with Hono API