I have my api opended up to the public for an api. I have a .vercel.app that works fine with no CORS errors. However, with my custom .com domain I am getting CORS errors. The two errors are:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at commercesite.net/api/keys. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 308.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at commercesite.net/api/keys. (Reason: CORS request did not succeed). Status code: (null).
Here is my next.config.js file:
/* eslint-disable */
/** @type {import('next').NextConfig} */
const nextConfig = {
async headers() {
return [
{
source: "/api/:path*",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "*" },
{
key: "Access-Control-Allow-Methods",
value: "GET,DELETE,PATCH,POST,PUT,OPTIONS",
},
{
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, Authorization, id, filters, Api-Key",
},
],
},
];
},
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
nextRuntime = "nodejs";
return config;
},
eslint: {
ignoreDuringBuilds: true,
},
typescript: {
ignoreBuildErrors: true,
},
};
module.exports = nextConfig;
Everything works fine on the Vercel domain but not the custom Namecheap one.
The custom domain is accesible just not through a third party site.
Note: The url actually ends in .com SO is just requiring a .net domain.