Skip to main content
Solved

CORS fetching API post for profiles in NEXT JS 13

  • March 29, 2024
  • 2 replies
  • 49 views

I can’t fetch API in Next JS 13 and always getting CORS, is it need the API call with Server Side? 
 

this is my code in client side using react-hook-form and zod for validation

    const onSubmit: SubmitHandler<SignUpSchema> = async (data) => {
        try {
            const res = await axios.post(`${API_KEY}profiles`,
                data,
                {
                    headers: {
                        Authorization: TOKEN,
                        "revision": '2024-12-15',
                        "accept": "application/json",
                        "Access-Control-Allow-Origin": "*",
                        "content-Type": 'application/json'
                    }
                });

            const datas = await res?.data
            console.log(datas)

            if (res.status === 200) {
                subscribe
                setValue('id', datas.data.id)
            }
        } catch (err) {
            console.log(err);
        }
    }

then this is my route api files

export async function POST(request: Request) {
    const {
        email,
        phone,
        name,
        nationality,
        skill_level,
        boxing_type,
        age,
        sex,
        height,
        weight,
        fight_weight,
        gym,
        instagram,
        training_date,
        reason
    } = await request.json();

    try {
        const res = await axios.post(API_KEY + PROFILES,
            {
                data: {
                    data: {
                        type: 'profile',
                        attributes: {
                            email: email,
                            phone_number: phone,
                            first_name: name,
                            last_name: '-',
                            location: {
                                country: nationality
                            },
                            skill_level: skill_level,
                            boxing_type: boxing_type,
                            age: age,
                            sex: sex,
                            height: height,
                            weight: weight,
                            fight_weight: fight_weight,
                            gym: gym,
                            nationality: nationality,
                            instagram: instagram,
                            training_date: training_date,
                            fight_reason: reason ? reason : ''
                        }
                    }
                }
            },
            {
                headers: {
                    Authorization: TOKEN,
                    "revision": '2024-12-15',
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Origin": "*",
                }
            }
        )
        if (res.status === 200) {
            const response = NextResponse.json(
                {
                    code: 200,
                    ...res?.data,
                },
                { status: 200 },
            );
            return response;
        }
    } catch (err) {
        return NextResponse.json(
            err
        );
    }
}

and the error said, there is no CORS in headers but i already add it.

Best answer by Brian Turcotte

Hi @Germcell!

Is this issue still occurring for you?

- Brian

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

Brian Turcotte
Forum|alt.badge.img+37

Hi @Germcell!
 

I’m going to check on this with our API team and I’ll update the thread as soon as possible!

Best,
Brian


Brian Turcotte
Forum|alt.badge.img+37
  • Klaviyo Alum
  • 1393 replies
  • Answer
  • April 25, 2024

Hi @Germcell!

Is this issue still occurring for you?

- Brian