When testing plugin via local development POST request errors out with a CORS error, however, GET request work

Plugin Development
, ,
1

When Chat GPT plugin makes a POST request, it fails with the following error:

“Access to fetch at ‘http://localhost:3000/api/project/create’ from origin ‘https://chat.openai.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.” No issues with GET requests.

Using next.js with App Router

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        // matching all API routes
        source: '/(.*)',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: 'https://chat.openai.com' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' },
          { key: 'Access-Control-Allow-Headers', value: '*' },
        ],
      },
    ];
  },
};

Anyone else run into this issue?

2

Adding OPTIONS to the POST route fixed it

const corsHeaders = {
  'Access-Control-Allow-Origin': 'https://chat.openai.com',
  'Access-Control-Allow-Methods': 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
  'Access-Control-Allow-Headers': '*',
  'Access-Control-Allow-Credentials': 'true',
};

export async function OPTIONS(req: NextRequest) {
  return NextResponse.json({}, { headers: corsHeaders });
}

export async function POST(req: NextRequest) {
  try {
    return NextResponse.json({}, { status: 201 });
  } catch (err: any) {
    return NextResponse.json({ error: err.message }, { status: 500 });
  }
}