Hono•2mo ago

CORS Issue

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 ?

8 Replies

JustinNoel•2mo ago

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

creatourOP•2mo ago

i just test it on my localhost,

JustinNoel•2mo ago

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.

Willy•2mo ago

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

JustinNoel•2mo ago

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.

Willy•2mo ago

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;

JustinNoel•2mo ago

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'],
  })
)

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. 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.

Willy•2mo ago

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.

Gaming

Programming

CORS Issue