javascript - resource - symfony 4 cors

Symfony2: permitir Access-Control-Allow-Origin con google charts

Question

En mi aplicación Symfony, estoy usando Google charts.

Me sale un error:

XMLHttpRequest cannot load https://www.google.com/uds/api/visualization/1.0/dca88b1ff7033fac80178eb526cb263e/ui+en.css. No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''http://foodmeup.dev'' is therefore not allowed access.

He intentado evitar esto configurando un oyente que agrega encabezados a la respuesta (vea el oyente de cors aquí: Symfony2 - ¿cómo puedo configurar Encabezados personalizados? ) Y no está funcionando, obtengo el mismo error.

<?php
namespace AppBundle/EventListener;

use Symfony/Component/HttpKernel/Event/FilterResponseEvent;

class CorsListener
{
public function onKernelResponse(FilterResponseEvent $event)
{
    $response = $event->getResponse();
    $responseHeaders = $response->headers;

    $responseHeaders->set(''Access-Control-Allow-Headers'', ''origin, content-type, accept'');
    $responseHeaders->set(''Access-Control-Allow-Origin'', ''*'');
    $responseHeaders->set(''Access-Control-Allow-Methods'', ''POST, GET, PUT, DELETE, PATCH, OPTIONS'');

    $event->setResponse($response);
}
}

En mi opinión, uso un simple gráfico de Google:

<div class="piechart margin-auto" style="height: 220px;" data-completeness="{{ completeness }}"></div>

<script>var googleCharts = [];</script>
    <script type="text/javascript">

        function drawProfilePieCharts()
        {
            var completeness = $(this).data(''completeness'');

            var data = google.visualization.arrayToDataTable([
                [''Nom'',    ''Valeur''],
                ["Profil rempli à ", completeness],
                [''Manque'', 100 - completeness]
            ]);

            var options = {
                backgroundColor: { fill:''transparent''},
                pieSliceBorderColor : ''transparent'',
                pieHole: 0.8,
                legend: {position: ''top''},
                width: 220,
                height: 220,
                tooltip: {trigger: ''none''},
                pieStartAngle: -90,
                pieSliceTextStyle :{fontsize : 16, color: ''transparent''},
                slices: {
                    0: { color: ''#09b4ff''},
                    1: { color: ''#444''}
                },
                chartArea : {width: ''90%'', height: ''90%''}
            };

            var chart = new google.visualization.PieChart(this);
            chart.draw(data, options);
        }

        googleCharts.push("$(''.piechart'').each(drawProfilePieCharts)");

    $(window).resize(function(){
        drawAllCharts();
    });


    google.load(''visualization'', ''1'', {packages:[''corechart'', ''bar'', ''line'']});
    var drawAllCharts = function() {
        for (var i = 0; i < googleCharts.length; i++) {
            eval(googleCharts[i]);
        }
    };

    google.setOnLoadCallback(function(){drawAllCharts()});

    </script>

Answer 1

Prueba esto::

use Symfony/Component/HttpFoundation/Response;

$xmlContent = ''Your XML content'';

$response = new Response();

$response->setContent($xmlContent);
$response->headers->set(''Content-Type'', ''text/xml'');
$response->headers->set(''Access-Control-Allow-Origin'', ''http://foodmeup.dev'');

// prints the headers followed by the content
$response->send();

No probado

Editar:

Es posible que deba establecer la respuesta al evento:

$response = $event->getResponse();

$response->headers->set(''Access-Control-Allow-Headers'', ''origin, content-type, accept'');
    ...

$event->setResponse($response); 

Answer 2

Intenté simplemente configurar el encabezado en la respuesta, y funcionó:

$response->headers->set(''Access-Control-Allow-Origin'', ''http://foodmeup.dev'');

Tenga en cuenta que la URL DEBE SER exactamente la esperada, con HTTP o HTTPS y no / al final.

Es posible configurar más de uno de estos encabezados, en mi caso utilicé 4, HTTP y HTTPS, servidores de desarrollo y prod. Todo funcionó bien.

Answer 3

Una buena cosa aquí es usar el suscriptor de eventos kernel, como por ejemplo:

class Toto implements EventSubscriberInterface
{
    public static function getSubscribedEvents()
    {
        return array(
            KernelEvents::RESPONSE => ''onKernelResponse''
        );
    }

    public function onKernelResponse(FilterResponseEvent $event)
    {
        $httpRequestOrigin = $event->getRequest()->headers->get(''origin'');

        $event->getResponse()->headers->set(''Access-Control-Allow-Origin'', $httpRequestOrigin);
        $event->getResponse()->headers->set(''Access-Control-Allow-Credentials'', ''true'');
    }
}