#has anyone else had a Cors issue with
astral elk
are you able to share a link to source or deployment? would be happy to take a look and confirm all the headers are set
ivory moon
I don't see the additional headers in the dev consoles. You'd have to authenticate before they're hit so I'm not sure if that'll help much
it's weird because locally I see the additional headers, in the github they're there. It's almost as if Vercel is stripping that out during build time? idk
I'm seeing some people use micro-cors to get around it but it's coming from the same domain so idk why it would even be an issue
astral elk
weird, how are you setting the headers?
cors shouldn't be an issue on the same origin as well
ivory moon
first in the next.config.js file:
module.exports = {
reactStrictMode: true,
async headers() {
return [
{
// matching all API routes
source: "/api/(.*)",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "*" },
{
key: "Access-Control-Allow-Methods",
value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
},
{
key: "Access-Control-Allow-Headers",
value:
"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
},
],
},
];
},
images: {
domains: ["i.seadn.io", "res.cloudinary.com"],
},
};
and then I made a vercel.json file when that didn't work:
"headers": [
{
"source": "/.*",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
},
{
"key": "Access-Control-Allow-Headers",
"value": "X-Requested-With, Access-Control-Allow-Origin, X-HTTP-Method-Override, Content-Type, Authorization, Accept"
},
{
"key": "Access-Control-Allow-Credentials",
"value": "true"
}
]
}
]
}
updated the source on that a bunch of times just in case
then I also created a middleware function that runs at the top of each of the API handlers:
import { NextApiRequest, NextApiResponse } from "next";
import Cors from "cors";
const cors = Cors({
methods: ["POST", "GET", "HEAD", "OPTIONS"],
});
// And to throw an error when an error happens in a middleware
export default function runMiddleware(
req: NextApiRequest,
res: NextApiResponse
) {
if (req.method === "OPTIONS") {
return res.status(200).send("ok");
}
return new Promise((resolve, reject) => {
cors(req, res, (result: any) => {
if (result instanceof Error) {
return reject(result);
}
return resolve(result);
});
});
}
all of that, and it's just the same cors error
I'm ready to add a no-cors header on there and roll the dice lol
since it's all coming from the same domain anyway