由于 CORS 政策，Google Sheets JSON API 未能获取答案

【问题标题】：Google Sheets JSON API Failed Fetch due to CORS Policy由于 CORS 政策，Google Sheets JSON API 未能获取
【发布时间】：2021-01-16 05:05:32
【问题描述】：

我正在使用 Vue 从 google sheet JSON 文档中提取数据并不断遇到以下错误，这是我在执行相同过程时从未见过的。

Access to fetch at 'https://spreadsheets.google.com/feeds/list/11lnTz3OBSIe-60N-j3JCw09E-zJCTuMizcRa6NaJXVs/od6/public/values?alt=json%E2%80%A9' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

GET https://spreadsheets.google.com/feeds/list/11lnTz3OBSIe-60N-j3JCw09E-zJCTuMizcRa6NaJXVs/od6/public/values?alt=json%E2%80%A9 net::ERR_FAILED

index.html:1 Uncaught (in promise) TypeError: Failed to fetch

这是我的 Vue.js 代码。

const app = new Vue({
    el: '#app',
    data: {
        projects: []
    },
    beforeCreate: function() {
        fetch('https://spreadsheets.google.com/feeds/list/11lnTz3OBSIe-60N-j3JCw09E-zJCTuMizcRa6NaJXVs/od6/public/values?alt=json ')
        .then(response => response.json())
        .then(data => {
            this.projects = data
            console.log(data)
        })
    }
});

我尝试记录数据以查看控制台中会显示的内容。我听说 Google 可能已经更改了他们的 CORS 政策，但我找不到合适的解决方法。

是否有人对我的代码中的修复有适当的解决方法，应该允许我提取 JSON API 数据？我最终想用我的 Google 表格中的刷新数据填充我的 HTML。

【问题讨论】：

标签： javascript vue.js google-api cors

【解决方案1】：

由于您在 SSL 安全 URL 上进行提取，即带有 https:// 的 URL，因此请求的来源也应该是安全的...

谷歌接口

https://spreadsheets.google.com/feeds/list/11lnTz3OBSIe-60N-j3JCw09E-zJCTuMizcRa6NaJXVs/od6/public/values?alt=json

请求的来源也应该是

https://example.domain

不是

http://example.domain

【讨论】：

谢谢您的回答！如何更改请求的来源？现在，我正在本地检查这个 fetch 请求。
你需要在线托管，或者使用代理（我怀疑这会起作用，因为谷歌技术真的很先进）
谢谢！我最终使用 Visual Studio Code 的扩展 LiveServer 托管它，它似乎工作正常?。