Merge pull request #381 from developmentseed/enable-cors

allowing CORS in API

Author: kamicut

next.config.js

@@ -3,6 +3,27 @@ const vercelUrl =
   `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
 
 module.exports = {
+  async headers() {
+    return [
+      {
+        // matching all API routes
+        // link: https://vercel.com/guides/how-to-enable-cors#enabling-cors-in-a-next.js-app
+        source: '/api/:path*',
+        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: '*',
+          },
+        ],
+      },
+    ]
+  },
   serverRuntimeConfig: {
     DEFAULT_PAGE_SIZE: 10,
     NODE_ENV: process.env.NODE_ENV || 'development',

src/middlewares/base-handler.js

@@ -58,6 +58,11 @@ export function createBaseHandler() {
       })
     },
     onNoMatch: (req, res) => {
+      if (req.method === 'OPTIONS') {
+        logger.info('OPTIONS request')
+        return res.status(200).end()
+      }
+
       res.status(404).json({
         statusCode: 404,
         error: 'Not Found',

src/pages/api/[[...slug]].js

@@ -14,6 +14,10 @@ handler.get('api/', (_, res) => {
   res.status(200).json({ version: packageJson.version })
 })
 
+handler.options('api/*', (_, res) => {
+  res.status(200).end()
+})
+
 manageRouter(handler)
 
 export default handler