CORS fix for APIs

middleware.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const allowedOrigins = [
+	"https://vibinex.com",
+	"chrome-extension://jafgelpkkkopeaefadkdjcmnicgpcncc", 
+	"https://github.com",
+	"https://bitbucket.org",
+];
+
+const corsOptions = {
+	'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+	'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+}
+
+export function middleware(request: NextRequest) {
+	// Check the origin from the request
+	const origin = request.headers.get('origin') ?? ''
+	const isAllowedOrigin = allowedOrigins.includes(origin)
+
+	// Handle preflighted requests
+	const isPreflight = request.method === 'OPTIONS'
+
+	if (isPreflight) {
+		const preflightHeaders = {
+			...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }),
+			...corsOptions,
+		}
+		return NextResponse.json({}, { headers: preflightHeaders })
+	}
+
+	// Handle simple requests
+	const response = NextResponse.next()
+
+	if (isAllowedOrigin) {
+		response.headers.set('Access-Control-Allow-Origin', origin)
+	}
+
+	Object.entries(corsOptions).forEach(([key, value]) => {
+		response.headers.set(key, value)
+	})
+
+	return response
+}
+
+export const config = {
+	matcher: '/api/extension/:path*',
+}

next.config.js

@@ -55,7 +55,6 @@ const nextConfig = {
 				source: "/api/:path*",
 				headers: [
 					{ key: "Access-Control-Allow-Credentials", value: "true" },
-					{ key: "Access-Control-Allow-Origin", value: "*" }, //TODO - narrow down this value
 					{
 						key: "Access-Control-Allow-Methods",
 						value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
@@ -83,4 +82,4 @@ const nextConfig = {
 
 const withMDX = require('@next/mdx')();
 
-module.exports = withMDX(nextConfig)
+module.exports = withMDX(nextConfig);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibinex-website",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "private": false,
   "homepage": "https://vibinex.com",
   "description": "A plugin that works with GitHub, Bitbucket and GitLab to personalize and data-enrich their code review interfaces",

pages/api/extension/events.ts

@@ -3,8 +3,6 @@ import rudderStackEvents from "../events";
 
 const events = (req: NextApiRequest, res: NextApiResponse) => {
 	if (req.method === "OPTIONS") {
-		res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
-		res.setHeader("Access-Control-Allow-Origin", "*");
 		res.status(200).send("Ok");
 		return;
 	}

pages/api/extension/relevant.ts

@@ -14,7 +14,6 @@ const getUser = async (req: NextApiRequest, res: NextApiResponse) => {
 const relevantHandler = async (req: NextApiRequest, res: NextApiResponse) => {
 	// For cors prefetch options request
 	if (req.method == "OPTIONS") {
-		res.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Origin, Content-Type, Authorization");
 		res.status(200).send("Ok");
 		return;
 	}

pages/api/extension/setup.ts

@@ -4,8 +4,6 @@ import { getSetupReposFromDbForOwner } from '../../../utils/db/setup';
 export default async function setupRepos(req: NextApiRequest, res: NextApiResponse) {
 	// For cors prefetch options request
 	if (req.method == "OPTIONS") {
-		res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
-		res.setHeader("Access-Control-Allow-Origin", "*");
 		res.status(200).send("Ok");
 		return;
 	}