javascript - 对 symfony api 的 ajax 请求返回不存在 'Access-Control-Allow-Origin' header

Question

我正在使用 React 制作简单的应用程序，该应用程序将 ajax 请求发送到使用 Symfony 制作的 API。我正在开发 React 应用程序和 symfony api。我正在从 localhost:3000 发送请求到 localhost:8000。这是我发送的 ajax 请求

addUser (data) {
    console.log('made it')
    let request = {
      method: 'post',
      url: 'http://127.0.0.1:8000/user/post',
      data: JSON.stringify({'username': data}),
      contentType: 'application/json'
    }
    $.ajax(request)
      .done(data => this.addUserSuccess(data))
      .fail(err => this.addUserFail(err))
  }

这是处理请求的 Symmfony 应用程序

/**
     * Creates a new user entity.
     *
     * @Route("/post", name="user_new")
     * @Method({"GET", "POST"})
     */
    function newAction(Request $request ) {
        echo $request;
        $body = $request->getContent();
        $body = json_decode($body,true);
        $username = $body['username'];
        $user = new User($username);
        $em = $this->getDoctrine()->getManager();
        $em->persist($user);
        $em->flush();

        return new JsonResponse($user,200,array('Access-Control-Allow-Origin'=> '*'));
    } 

到目前为止，我还处于起步阶段，正如你所看到的，我正在创建新用户，没有密码、安全性或任何东西。我只是想让它工作并能够将请求从应用程序发送到 api。这是结果

XMLHttpRequest cannot load http://127.0.0.1:8000/user/post. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405.

我之前见过很多类似这样的问题，答案之一是返回带有 header 的 JsonResponse，正如您所看到的，它不起作用。

这是我遵循其答案的问题之一 - Origin is not allowed by Access-Control-Allow-Origin但不幸的是没有成功。

你能告诉我如何解决这个问题吗？预先感谢您!

Answer 1

这就是我针对相同情况所做的事情。在 app/config/config_dev.yml 中，添加新服务。将其放入 config_dev.yml 意味着这只会影响通过 app_dev.php 的请求。

services:
    app.cors_listener:
        class: AppBundle\Security\CorsListener
        tags:
            - { name: kernel.event_listener, event: kernel.response, method: onKernelResponse }

以及AppBundle/Security/CorsListener.php的内容:

<?php
namespace AppBundle\Security;

use Symfony\Component\HttpKernel\Event\FilterResponseEvent;

// Based on http://stackoverflow.com/a/21720357
class CorsListener
{
    public function onKernelResponse(FilterResponseEvent $event)
    {   
        $responseHeaders = $event->getResponse()->headers;

        $responseHeaders->set('Access-Control-Allow-Headers', 'origin, content-type, accept, credentials');
        $responseHeaders->set('Access-Control-Allow-Origin', 'http://localhost:8080');
        $responseHeaders->set('Access-Control-Allow-Credentials', 'true');
        $responseHeaders->set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, PATCH, OPTIONS');
    }
}