Symfony2：允许使用谷歌图表访问控制允许来源

Posted 2023-02-27

【中文标题】Symfony2：允许使用谷歌图表访问控制允许来源

【英文标题】：Symfony2 : allow Access-Control-Allow-Origin with google charts

【发布时间】：2015-07-10 14:34:26

【问题描述】：

在我的 Symfony 应用程序中，我使用的是谷歌图表。

我收到一个错误：

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.

我试图通过设置一个侦听器来解决这个问题，该侦听器将标头添加到响应中（请参阅此处的 cors 侦听器：Symfony2 - how can I set custom Headers?），但它不起作用，我得到了同样的错误。

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

在我看来，我使用了一个简单的谷歌图表：

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

【问题讨论】：

你能显示你的后端代码吗？

如果您的意思是向响应中添加标头的代码，我已经从这里复制了 cors 侦听器：***.com/questions/8472333/…

您没有为 $response 设置标题。您将它们设置为 $responseHeaders

【参考方案1】：

试试这个::

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

未测试

编辑：

您可能需要设置事件响应：

$response = $event->getResponse();

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

$event->setResponse($response); 

【讨论】：

好吧，我需要将它保留在我的听众中，因为我不会更改每个响应，或者我需要更通用的解决方案。设置您指定的网址不起作用。将内容类型设置为 text/xml 显然与我拥有的元标记相反。

我看到了你编辑的问题。检查我的新答案。

感谢您的尝试。我已经更新了响应事件，它也不起作用。我真的可以做点什么吗？这不是缺少此允许访问参数的 google 响应的标头吗？

嗯，可能。我对谷歌图表一无所知。

【参考方案2】：

尝试只在响应上设置标题，它起作用了：

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

考虑到 URL 必须与预期的完全一致，使用 HTTP 或 HTTPS，最后没有 /。

可以设置多个这些标头，在我的情况下，我使用了 4、HTTP 和 HTTPS、开发和生产服务器。一切正常。

【讨论】：

您可以使用 '*' 来允许所有 URL。

【参考方案3】：

这里的一个好处是使用内核事件订阅者，例如：

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

【讨论】：

谢谢！你的回答对我帮助很大）