CORS Issue

creatour · 2024-09-30T07:27:48.239Z

Im using hono x bun for my backend and next js for my front end. when i fetch the api it will return "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." i already set my cors settings, here i attached someone had a solution ?

J

JustinNoel•9/30/24, 10:41 AM

This is happening from a public URL? If so, you'd need to add that public URL in thi origin for your code.

C

creatourOP•10/3/24, 4:22 AM

i just test it on my localhost,

J

JustinNoel•10/3/24, 3:40 PM

Your browser should show some information about the policy violation. It may include information about what headers you're requesting that are refused. Please share a screenshot or the response that you see in the browser.

JJustinNoel Your browser should show some information about the policy violation. It may inc...

W

Willy•10/15/24, 2:00 AM

I'm having the same problem, any solution, I have localhost:3000 and app.localhost:3000

WWilly I'm having the same problem, any solution, I have localhost:3000 and app.localho...

J

JustinNoel•10/15/24, 12:22 PM

Your browser should show some information about the policy violation. It may include information about what headers you're requesting that are refused. Please share a screenshot or the response that you see in the browser.

JJustinNoel > Your browser should show some information about the policy violation. It may i...

W

Willy•10/15/24, 12:58 PM

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { handle } from 'hono/vercel';

import clerk from '@/features/clerk/server/route';
import video from '@/features/video/server/route';

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

app.use(
  '*',
  cors({
    origin: (origin) => {
      return origin.endsWith('.localhost:3000')
        ? origin
        : 'http://localhost:3000';
    },
  }),
);

const routes = app.route('/clerk', clerk).route('/video', video);

export const GET = handle(app);
export const POST = handle(app);

export type AppType = typeof routes;

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { handle } from 'hono/vercel';

import clerk from '@/features/clerk/server/route';
import video from '@/features/video/server/route';

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

app.use(
  '*',
  cors({
    origin: (origin) => {
      return origin.endsWith('.localhost:3000')
        ? origin
        : 'http://localhost:3000';
    },
  }),
);

const routes = app.route('/clerk', clerk).route('/video', video);

export const GET = handle(app);
export const POST = handle(app);

export type AppType = typeof routes;

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { handle } from 'hono/vercel';

import clerk from '@/features/clerk/server/route';
import video from '@/features/video/server/route';

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

app.use(
  '*',
  cors({
    origin: (origin) => {
      return origin.endsWith('.localhost:3000')
        ? origin
        : 'http://localhost:3000';
    },
  }),
);

const routes = app.route('/clerk', clerk).route('/video', video);

export const GET = handle(app);
export const POST = handle(app);

export type AppType = typeof routes;

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { handle } from 'hono/vercel';

import clerk from '@/features/clerk/server/route';
import video from '@/features/video/server/route';

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

app.use(
  '*',
  cors({
    origin: (origin) => {
      return origin.endsWith('.localhost:3000')
        ? origin
        : 'http://localhost:3000';
    },
  }),
);

const routes = app.route('/clerk', clerk).route('/video', video);

export const GET = handle(app);
export const POST = handle(app);

export type AppType = typeof routes;

J

JustinNoel•10/16/24, 10:17 AM

That's interesting. For a test, can you just harcode the cors like displayed here (https://hono.dev/docs/middleware/builtin/cors#usage)?

app.use(
  '*',
  cors({
    origin: 'http://app localhost:3000',
    allowMethods: ['POST', 'GET', 'OPTIONS'],
  })
)

app.use(
  '*',
  cors({
    origin: 'http://app localhost:3000',
    allowMethods: ['POST', 'GET', 'OPTIONS'],
  })
)

app.use(
  '*',
  cors({
    origin: 'http://app localhost:3000',
    allowMethods: ['POST', 'GET', 'OPTIONS'],
  })
)

app.use(
  '*',
  cors({
    origin: 'http://app localhost:3000',
    allowMethods: ['POST', 'GET', 'OPTIONS'],
  })
)

Does that work? If it does, I'd suggest reverting back to your original code and debugging what's going on in your local Hono

node_modules

node_modules

. See https://github.com/honojs/hono/blob/main/src/middleware/cors/index.ts line 57.

GitHub

hono/src/middleware/cors/index.ts at main · honojs/hono

Web framework built on Web Standards. Contribute to honojs/hono development by creating an account on GitHub.

CORS Middleware - Hono

Web framework built on Web Standards for Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Node.js, and others. Fast, but not only fast.

JJustinNoel That's interesting. For a test, can you just harcode the cors like displayed he...

W

Willy•10/17/24, 11:43 AM

I tried this way, as shown in the documentation, but it didn't work at all. I'll use the NextJs API anyway. Anyway, thank you very much for your attention.

Similar Threads

Similar Threads

Similar Threads