FullCalendar 不适用于 Google 日历 SEC7120答案

【问题标题】：FullCalendar not working with Google Calendar SEC7120FullCalendar 不适用于 Google 日历 SEC7120
【发布时间】：2019-09-29 19:28:23
【问题描述】：

我正在尝试将 Google 日历与 FullCalendar 集成。我按照https://fullcalendar.io/docs/google-calendar 中的步骤填写了我的信息。

document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                aspectRatio: 4,
                plugins: [ 'timeGrid' ,'googleCalendar', 'list'],
                defaultView: 'listWeek',
                googleCalendarApiKey: 'A...g',
                eventSources:[                        
                    {
                        googleCalendarId: 'l...@gmail.com'//primary calendar
                    },
                    {
                        googleCalendarId: '7...nk@group.calendar.google.com',//second calendar
                    }],
                header: {
                left: 'prev,next today',
                center: 'title',
                right: ''
                },
            });
            calendar.render();
        });

但是，没有显示任何事件，控制台显示

SEC7120：[CORS] 源“file://”在“https://www.googleapis.com/calendar/v3/calendars/7jmaq...lts=9999”的跨源资源的 Access-Control-Allow-Origin 响应标头中找不到“file://”。

点击提供的链接会得到以下结果：

{ “种类”：“日历#事件”，“etag”：“\”...qe80g\””，“摘要”：“...”，“更新”：“2019-09-28T21:29:49.573Z ", "timeZone": "...", "accessRole": "reader", "defaultReminders": [], "nextSyncToken": "CIiX05...YAQ==", "items": [ { "kind" : "日历#事件", "etag": "\"31....9146000\"", “id”：“2do9...h04”、“状态”：“已确认”、“htmlLink”：“https://www.google.com/calendar/event?eid=MmR...tAZw”、“已创建”：“2019-09-28T21:29:49.000Z”、“已更新” ：“2019-09-28T21:29:49.573Z”，“摘要”：“测试”，“创建者”：{“电子邮件”：“l...@gmail.com”}，“组织者”：{“电子邮件": "7...mnk@group.calendar.google.com", "displayName": "...", "self": true }, "start": { "dateTime": "2019-09-28T17 :00:00-04:00" }, "end": { "dateTime": "2019-09-28T18:00:00-04:00" }, "iCalUID": "2...04@google. com", "序列": 0 } ]}

总而言之，日历工作正常，但无法获取任何事件信息。

【问题讨论】：

标签： javascript ajax http cors fullcalendar

【解决方案1】：

这里的关键问题是这部分错误信息：

来源'file://'

您需要通过http:// 或https:// 为您的页面提供服务，然后它才能正常工作。

浏览器安全限制阻止使用file:// 协议在本地加载的文件（与网络服务器相反——即使该网络服务器在同一台机器上运行）向远程站点发出 Ajax 请求。这使得某些类型的网络钓鱼攻击更加困难。

在您的机器上安装一个免费的网络服务器并以这种方式为您的页面提供服务。

【讨论】：