Symfony2: Allow Access-Control-Allow-Origin with Google charts

In my Symfony application I am using google charts.

I am getting the 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.

      

I tried to work around this by installing a listener that adds headers to the response (see cors listener here: Symfony2 - how can I set custom headers? ) And it doesn't work, I get the same 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);
}
}

      

In my opinion I am using a simple google graph:

<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>

      

+3


source to share


3 answers


Tried just setting the response header and it worked:

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

      



Note that the URL MUST BE exactly as expected, with HTTP or HTTPS and no / at the end.

It is possible to set more than one of these headers, in my case I used 4, HTTP and HTTPS, dev and prod servers. Everything worked fine.

+6


source


Try the following:

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();

      

Not tested



Edit:

You may need to set an event response:

$response = $event->getResponse();

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

$event->setResponse($response); 

      

+2


source


The good thing is to use a kernel event subscriber like:

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');
    }
}

      

+2


source







All Articles