完整日历CakePhp 3.x和错误:XMLHttpRequest无法加载' ...'。 No' Access-Control-Allow-Origin'标头出现在请求的资源上?

时间:2015-12-21 23:51:41

标签: javascript jquery cakephp fullcalendar cakephp-3.x

我在cakephp 3.x上使用完整日历,我只在移动设备上收到此错误消息" XMLHttpRequest无法加载https://www.utahreia.org/events/feed ... No' Access-Control-Allow-原产地'标头出现在请求的资源上。起源' https://utahreia.org'因此不允许访问。"

在桌面上,事件加载正常,只是我收到错误的移动设备,我不明白为什么。 Feed用于从数据库中获取事件并将其呈现给此URL:full calendar

以下是Feed方法:

public function feed($id=null) {
        $this->layout = "ajax";
        $vars = $this->request->query([]);
        $conditions = ['UNIX_TIMESTAMP(start) >=' => $vars['start'], 'UNIX_TIMESTAMP(start) <=' => $vars['end']];
        $events = $this->Events->find('all', $conditions)->contain(['EventTypes']);
        foreach($events as $event) {
            if($event->all_day === 1) {
                $allday = true;
                $end = $event->start;
            } else {
                $allday = false;
                $end = $event->end;
            }
            $event_img[] = array(
                    'id' => $event->id,
                    'title'=> $event->title,
                    'start'=> $event->start,
                    'end' => $end,
                    'allDay' => $allday,
                    'url' => Router::url('/') . 'events/view/'.$event->id,
                    'details' => $event->details,
                    'className' => $event->event_type->color
            );
        }
        $this->set("json", json_encode($event_img));
        $this->set(compact('user'));
    }

这是ready.js:

jQuery(document).ready(function( $ ) {

    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({

        header: {
            left:   'title',
            center: '',
            right:  'today agendaDay,agendaWeek,month prev,next'
        },
        defaultView: 'month',
        fixedWeekCount: false,
        firstHour: 8,
        aspectRatio: 2,
        editable: adminEdit,
        events: plgFcRoot + "events/feed"
    })
});

完整日历页面:

<div class="page-wrap">
    <div class="Calendar index">
        <div id="calendar"></div>
    </div>
</div>

<script type="text/javascript">plgFcRoot = "https://www.utahreia.org/";</script>
<?php if (isset($current_user) && $current_user['role'] === 1): ?>
<script type="text/javascript">adminEdit = true;</script>
<?php else: ?>
<script type="text/javascript">adminEdit = false;</script>
<?php endif; ?>

<?= $this->Html->css('/full_calendar/css/fullcalendar', ['plugin' => true]); ?>
<?= $this->Html->css('/full_calendar/css/jquery.qtip.min', ['plugin' => true]); ?>
<?= $this->Html->script('/full_calendar/js/lib/jquery.min.js', ['plugin' => true]); ?>
<?= $this->Html->script('/full_calendar/js/lib/moment.min.js', ['plugin' => true]); ?>
<?= $this->Html->script('/full_calendar/js/fullcalendar.js', ['plugin' => true]); ?>
<?= $this->Html->script('/full_calendar/js/jquery.qtip.min.js', ['plugin' => true]); ?>
<?= $this->Html->script('/full_calendar/js/ready.js', ['plugin' => true]); ?>

2 个答案:

答案 0 :(得分:0)

可能您正在运行混合移动应用程序,这就是您在XMLHttpRequest上收到错误的原因。您遇到此错误的原因是因为您的移动应用程序正在从移动设备本地提供给混合WebView,这意味着在应用程序中提供的页面的来源与该来源不匹配您尝试请求的资源(您的Feed端点。)要允许您的跨源移动应用程序连接到您的端点,您必须在请求上设置跨源资源共享(CORS)标头。我实际上写了一个插件来做到这一点。 Here it is,我希望它有所帮助!

答案 1 :(得分:0)

我升级到CakePHP 3.1,我不再遇到这个问题了。