我正在尝试将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"处的跨源资源的访问控制允许源响应标头中找不到"file://"。
单击提供的链接会得到以下结果：
{ "种类"： "日历#事件"， "etag"： "\"...qe80g\"， "摘要"： "..."， "更新"： "2019-09-28T21：29：49.573Z"， "时区"： "..."， "访问角色"： "读取器"， "默认提醒"： []， "下一个同步令牌"： "CIiX05...YAQ=="， "项目"： [ { "种类"： "日历#事件"， "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"， "显示名称"： "..."， "自我"： 真 }， "开始"： { "日期时间"： "2019-09-28T17：00：00-04：00" }， "结束"： { "日期时间"： "2019-09-28T18：00：00-04：00" }， "iCalUID"： "2...04@google.com"， "序列"： 0 } ]}
总而言之，日历工作正常，但无法获取任何事件信息。
这里的关键问题是错误消息的这一部分：
起源"file://">
您需要在http://或https://上提供页面，然后它才能正常工作。
浏览器安全限制阻止使用file://协议在本地加载的文件(与 Web 服务器相反 - 即使该 Web 服务器在同一台计算机上运行(向远程站点发出 Ajax 请求。这使得某些类型的网络钓鱼攻击更加困难。
在您的机器上安装免费的网络服务器并以这种方式提供您的页面。