FullCalendar 不适用于 Google 日历 SEC7120

Question

我正在尝试将 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] The origin 'file://' did not find 'file://' in the Access-Control-Allow-Origin response header for cross-origin resource at 'https://www.googleapis.com/calendar/v3/calendars/7jmaq...lts=9999'.

单击提供的 link 会得到以下结果：

{ "kind": "calendar#events", "etag": "\"...qe80g\"", "summary": "...", "updated": "2019-09-28T21:29:49.573Z", "timeZone": "...", "accessRole": "reader", "defaultReminders": [], "nextSyncToken": "CIiX05...YAQ==", "items": [ { "kind": "calendar#event", "etag": "\"31....9146000\"", "id": "2do9...h04", "status": "confirmed", "htmlLink": "https://www.google.com/calendar/event?eid=MmR...tAZw", "created": "2019-09-28T21:29:49.000Z", "updated": "2019-09-28T21:29:49.573Z", "summary": "Test", "creator": { "email": "l...@gmail.com" }, "organizer": { "email": "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", "sequence": 0 } ]}

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

Answer 1

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

The origin 'file://'

您需要在 http:// 或 https:// 上提供您的页面，然后它才能工作。

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

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

FullCalendar 不适用于 Google 日历 SEC7120

FullCalendar not working with Google Calendar SEC7120

javascript

ajax

http

fullcalendar

cors