Cloudflare Developers•2y ago

Cloudflare Pages Function CORS error

I can not seem to get the CORS headers to allow all origins on one specific function. I have followed the examples in the docs but seems I still have something wrong. Any suggestions?

import { checkStoreSupportCode } from '../helpers/pocketbaseApi';

export function onRequestOptions() {
    return new Response(null, {
        status: 204,
        headers: {
            'content-type': 'application/json;charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, HEAD, POST, OPTIONS',
            'Access-Control-Allow-Headers': '*',
        },
    });
}

export async function onRequest({ request, env }) {
    if (request.method !== 'POST') {
        return new Response('Method not allowed', { status: 405 });
    }

    const { supportCode } = await request.json();

    if (!supportCode) {
        return new Response('Missing support code', { status: 400 });
    }

    try {
        const { status, error, storeHash } = await checkStoreSupportCode(supportCode, env);
        if (error) {
            return new Response(JSON.stringify({ status, error }));
        }
        return new Response(JSON.stringify({ status, storeHash }));
    } catch (err) {
        console.log(err);
        return new Response(JSON.stringify({ status: 'error', error: 'An unknown error occured' }));
    }
}

import { checkStoreSupportCode } from '../helpers/pocketbaseApi';

export function onRequestOptions() {
    return new Response(null, {
        status: 204,
        headers: {
            'content-type': 'application/json;charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, HEAD, POST, OPTIONS',
            'Access-Control-Allow-Headers': '*',
        },
    });
}

export async function onRequest({ request, env }) {
    if (request.method !== 'POST') {
        return new Response('Method not allowed', { status: 405 });
    }

    const { supportCode } = await request.json();

    if (!supportCode) {
        return new Response('Missing support code', { status: 400 });
    }

    try {
        const { status, error, storeHash } = await checkStoreSupportCode(supportCode, env);
        if (error) {
            return new Response(JSON.stringify({ status, error }));
        }
        return new Response(JSON.stringify({ status, storeHash }));
    } catch (err) {
        console.log(err);
        return new Response(JSON.stringify({ status: 'error', error: 'An unknown error occured' }));
    }
}

2 Replies

Hello, I’m Allie!•2y ago

All of your responses must provide the CORS headers for it to work It appears it doesn’t read the headers when the supportCode is missing

JavaDad•2y ago

That seems to work if I just return the headers in every Response! Thank you so much.

Gaming

Programming

Cloudflare Pages Function CORS error