完整日历CakePhp 3.x和错误：XMLHttpRequest无法加载“…”。 请求的资源上没有'Access-Control-Allow-Origin'标头吗？

Question

I am using full calendar on cakephp 3.x and I am getting this error message only on mobile devices "XMLHttpRequest cannot load https://www.utahreia.org/events/feed ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://utahreia.org ' is therefore not allowed access."

On the desktop, the events load fine, it is just the mobile devices that I get the error and I have no idea why. The feed is used to grab events from database and renders them to this url: full calendar

Here is the feed method:

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

Here is the 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"
    })
});

Full Calendar page:

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

Answer 1

Assumably you're running a hybrid mobile app which is why you're recieving an error on XMLHttpRequest. The reason you're running into this error is because your mobile app is being served to the hybrid WebView locally from the mobile device, meaning that the origin of the page being served in the app doesn't match the origin of the resource you are trying to request (Your feed endpoint.) To allow your cross origin mobile app to connect to your endpoint, you're going to have to set Cross Origin Resource Sharing (CORS) headers on the request. I actually wrote a plugin to do just that. Here it is , I hope it helps!

Answer 2

我已升级到CakePHP 3.1，并且不再遇到此问题。