Theo's Typesafe Cult•2y ago

CORS nightmare

Hi everyone. I am currently developing a chrome extension, where I am fetching data from my nextjs api. The main problem here is that when I try to fetch data, I am getting a cors error, due to the extension’s origin being “null”. Does anyone know how to get the chrome extension to send its origin to the server?

Access to fetch at '(server endpoint)' (redirected from '(server endpoint)') from origin 'chrome-extension://(extension_id)' 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.

Access to fetch at '(server endpoint)' (redirected from '(server endpoint)') from origin 'chrome-extension://(extension_id)' 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.

Chrome extension:

 const user = useQuery(["user"], async () => {
    const response = await fetch("(server_endpoint)", {
      credentials: "include",
    });
    return response.json();
  });

 const user = useQuery(["user"], async () => {
    const response = await fetch("(server_endpoint)", {
      credentials: "include",
    });
    return response.json();
  });

Nextjs Middleware:

 if (origin && !allowedOrigins.includes(origin)) {
    console.log("Origin not allowed");
    console.log(origin);
    return new NextResponse(null, {
      status: 400,
      statusText: "Bad Request",
      headers: {
        "Content-Type": "text/plain",
      },
    });
  }

 if (origin && !allowedOrigins.includes(origin)) {
    console.log("Origin not allowed");
    console.log(origin);
    return new NextResponse(null, {
      status: 400,
      statusText: "Bad Request",
      headers: {
        "Content-Type": "text/plain",
      },
    });
  }

1 Reply

Lopen•2y ago

Add this to your header

cors({
      origin: corsUrl,
      credentials: true,
      allowedHeaders: ["Content-Type"],
    })

cors({
      origin: corsUrl,
      credentials: true,
      allowedHeaders: ["Content-Type"],
    })

This isn't nextjs but you should know how to translate it Also for me cors: * Didn't work so i had to explicitly put in the orgin domains and do some regex stuff

Gaming

Programming

CORS nightmare