3 replies

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",
      },
    });
  }

CORS nightmare

Similar Threads