否'Access-Control-Allow-Origin'Symfony 3和React

Question

I am experiencing a major concern. I develop an api with symfony 3. This api is queried on Front side with React. The server used back side (API) is http://127.0.0.1:8000 . And the server used on the Front side is http://localhost:3000 .

When I call the api from the front, I have two errors: - 405 Method Not Allowed - Access to XMLHttpRequest at ' http://127.0.0.1:8000/users/email/settings ' from origin ' http://localhost:3000 ' has been blocked by: CORS policy: Response to preflight check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

However, I specified the correct method (patch) and configured the header from the API:

Here is the detailed code:

API (back with symfony)

    /**
 * @Route("/users/email/settings", methods={"PATCH"})
 * @param Request $request
 * @param FlashMessage $flashMessage
 */
public function usersEmailEditAction(Request $request, FlashMessage $flashMessage)
{
    if($request->getContent())
    {
        $data = json_decode($request->getContent(), true);

        $em = $this->getDoctrine()->getManager();

        $user = $this->get('security.token_storage')->getToken()->getUser();

        $editUser = $em->getRepository(User::class)->find($user->getId());

        if (!$editUser) {
            return $flashMessage->messageError("USER_NOT_FOUND", 1);
        }

        if (!$data['password']) {
            return $flashMessage->messageError("PASSWORD_NOT_FOUND", 1);
        }

        if (!filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
            return $flashMessage->messageError("INVALID_EMAIL", 1, "format email invalid");
        }

        if (!filter_var($data['confirmEmail'], FILTER_VALIDATE_EMAIL)) {
            return $flashMessage->messageError("INVALID_EMAIL", 1, "format email invalid");
        }

        if ($data['email'] != $data['confirmEmail']) {
            return $flashMessage->messageError("NO_MATCHING_EMAIL", 1, "les emails sont différents");
        }

        // on vérifie le mot de passe
        $encoder = $this->get('security.password_encoder');

        $isPasswordValid = $encoder->isPasswordValid($user, $data['password']);

        // Le mot de passe n'est pas correct
        if (!$isPasswordValid) { 
            return $flashMessage->messageError("INCORRECT_PASSWORD", 1);
        }

        $editUser->setEmail($data['email']);
        $editUser->setUpdatedAt(new \DateTime());

        $em->flush();

        return $flashMessage->messageSuccess("EMAIL_UPDATED_SUCCESSFULLY", 0);



    }else {
        return $flashMessage->messageWarning("NOTHING_UPDATED", 2);
    }
}

the return $flashMessage

    public function messageSuccessAction($message, $code, $desc = null)
{
    $response = new Response();
    $response->setContent(json_encode([
        'error' => $code,
        'message' => $message
    ]));

    $response->headers->set('Content-Type', 'application/json');
    $response->headers->set('Access-Control-Allow-Origin', 'http://localhost:3000');
    $response->headers->set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, PATCH, OPTIONS'); 

    return $response;

    //return new JsonResponse(array("error" => $code, "message" => $message));
}

public function messageErrorAction($message, $code, $desc = null)
{
    $response = new Response();
    $response->setContent(json_encode([
        'error' => $code,
        'message' => $message
    ]));

    $response->headers->set('Content-Type', 'application/json');
    $response->headers->set('Access-Control-Allow-Origin', 'http://localhost:3000');
    $response->headers->set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, PATCH, OPTIONS'); 

    return $response;

    //return new JsonResponse(array("error" => $code, "message" => $message));
}

public function messageWarningAction($message, $code, $desc = null)
{

    $response = new Response();
    $response->setContent(json_encode([
        'error' => $code,
        'message' => $message
    ]));

    $response->headers->set('Content-Type', 'application/json');
    $response->headers->set('Access-Control-Allow-Origin', 'http://localhost:3000');
    $response->headers->set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, PATCH, OPTIONS'); 

    return $response;
    //return new JsonResponse(array("error" => $code, "message" => $message));
}

Request API from Front (use Axios)

    requestAPI = (myPassword, newEmail, confirmEmail) => {
    axios.patch('http://127.0.0.1:8000/users/email/settings', {
        crossdomain: true,
        password: myPassword,
        email: newEmail,
        confirmEmail: confirmEmail
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
}

I also tried without crossdomain, but nothing.

Do you have any idea ? Thank you for your helps

Answer 1

Is the call that gets the 405 Method Not Allowed by any chance an OPTIONS call? Also called a "preflight request" .

For all your CORS needs you should include the NelmioCorsBundle , it is easily configurable and you don't need to set your own CORS headers.

What happens here is, your browser will check first whether the server understands the CORS protocol with an OPTIONS call. But that isn't answered by your application, at least not with the correct CORS headers, so your PATCH call is never issued by your browser because of that. The error message even says so. "Response to preflight check : No 'Access-Control-Allow-Origin' header is present on the requested resource."