#CORS issue when attaching data object to POST

9 messages · Page 1 of 1 (latest)

granite plover
#

Are you sure it is a cors issue. Can you share all the details please

next kestrel
#

Sure!

Access to XMLHttpRequest at 'http://localhost:9000/store/customer/create-email-confirmation' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is what is logged in my browser console.

This below is my /api/.... route in nextjs:

import axios from "axios"

export const createEmailConfirmationEmail = async (email: string) => {
  const data = JSON.stringify({
    email,
  })

  const config = {
    method: "post" as const,
    // url: `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/store/customer/create-email-confirmation`,
    url: "http://localhost:9000/store/customer/create-email-confirmation",
    headers: {
      "Content-Type": "application/json",
    },
    data: data,
    withCredentials: true,
  }

  console.log("CONF", config)

  try {
    const response = await axios.request(config)
    return response.data
  } catch (error) {
    throw error
  }
}

Note how now I am attaching data: data

And this is my server side:

  customerRouter.post(
    "/create-email-confirmation",
    cors(storeCorsOptions),
    // authenticate(),
    createCustomerEmailConfirmation
  );
#

And this is the actual route:

import CustomerService from "../../../../services/customer";
import { IsEmail } from "class-validator";
import { EntityManager } from "typeorm";
import { validator } from "@medusajs/medusa/dist/utils/validator";

export default async (req, res) => {
  const validated = (await validator(
    StorePostCustomersCustomerEmailConfirmationReq,
    req.body
  )) as StorePostCustomersCustomerEmailConfirmationReq;

  const customerService: CustomerService = req.scope.resolve(
    "customerService"
  ) as CustomerService;

  const customer = await customerService
    .retrieveRegisteredByEmail(validated.email)
    .catch(() => undefined);

  if (customer) {
    // Will generate a token and send it to the customer via an email provider
    const manager: EntityManager = req.scope.resolve("manager");
    await manager.transaction(async (transactionManager) => {
      return await customerService
        .withTransaction(transactionManager)
        .generateVerifyEmailToken(customer.id);
    });
  }

  res.sendStatus(204);
};

/**
 * @schema StorePostCustomersCustomerEmailConfirmationReq
 * type: object
 * required:
 *   - email
 * properties:
 *   email:
 *     description: "The email of the customer."
 *     type: string
 *     format: email
 */

export class StorePostCustomersCustomerEmailConfirmationReq {
  @IsEmail()
  email: string;
}
# 
curl --location 'http://localhost:9000/store/customer/create-email-confirmation' \
--header 'Content-Type: application/json' \
--data-raw '{
    "email": "[email protected]"
}'
```

Above curl works just fine, same goes for Postman...
next kestrel
#

Adrien do you happen to know what might be going on? I can see that the request from the browser does not attach any cookies etc.. Its extremely blocking atm and I do not know what might be going on. E.g. I pasted the axios code from (working) Postman into my frontend and executed the exact same code there and get this CORS issue

uncut sonnet
#

I don't know if it is the cause of your issue, but in your code example, I think authenticate is meant to be authenticateCustomer. It may be the postman request is working because you have admin credentials set up there, which is what authenticate uses.

    "/create-email-confirmation",
    cors(storeCorsOptions),
    // authenticate(),
    createCustomerEmailConfirmation
  );
#

Never mind, i see it is commented out. Discord needs syntax highlighting. 🙂

granite plover
#

What are your config