Setting cors headers on dev server — for iframe

[mikestopcontinues]

Bug report

Describe the bug

I have two dev Next dev servers running simultaneously to develop one app that wraps another in an iframe. I need to use window communications, but it fails because the two apps are running on different ports.

Expected behavior

I would like to be able to set cors headers while using the dev server without having to write my own server. A simple cli argument would suffice, since this is only for development purposes.

[ijjk]

Hi, you can try the new experimental custom routes feature on the latest version of Next.js v9.3.4 that should allow you to set headers without adding a custom server. See the RFC here: #9081

You should be able to set CORS headers by adding the below next.config.js

module.exports = {
  experimental: {
    async headers() {
      return [
        {
          source: '/(.*)?',
          headers: [
            {
              key: 'Access-Control-Allow-Origin',
              value: '*'
            },
            {
              key: 'Access-Control-Allow-Methods',
              value: 'GET,HEAD,PUT,PATCH,POST,DELETE'
            },
          ]
        }
      ]
    },
    // temporary until https://github.com/zeit/next.js/pull/11755
    async rewrites() {
      return [
        {
          source: '/:path*',
          destination: '/:path*'
        }
      ]
    }
  }
}

[mikestopcontinues]

Thanks! Exactly what I needed!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.