前端发送GET请求时Google Sheets Web App遭CORS拦截求助

问题原因 #

你的Google Web App返回的响应中缺少Access-Control-Allow-Origin头，浏览器的CORS策略因此拦截了前端请求。

解决方案：修改App Script添加CORS响应头 #

直接在doGet函数的返回内容中添加跨域允许头即可，修改后的完整代码如下：

function doGet(e) {
    // 获取表格数据
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    const sheet = ss.getSheetByName('DataCollection');
    const max = sheet.getRange("F1").getValue();

    // 收集并排序数据
    const data = [];
    for (let i = 1; i <= max; i++) {
        data.push({
            name: sheet.getRange("B" + i).getValue(),
            data: sheet.getRange("A" + i).getValue()
        });
    }
    data.sort((a, b) => a.data > b.data ? -1 : 1);
    
    // 创建JSON输出并添加CORS头
    const output = ContentService.createTextOutput(JSON.stringify(data))
        .setMimeType(ContentService.MimeType.JSON)
        .setHeaders({
            "Access-Control-Allow-Origin": "*", // 允许所有域名跨域，也可指定具体域名如"https://your-static-domain.com"
            "Access-Control-Allow-Methods": "GET, OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type"
        });
    
    return output;
}

前端代码优化建议 #

GET请求无需设置Content-Type: application/json（GET没有请求体），可以简化代码并避免不必要的预检请求：

fetch("https://script.google.com/macros/s/.../exec")
.then(response => response.json())
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error('请求出错:', error);
});

为什么之前的方案无效？ #

• jQuery.ajax的jsonp：需要后端返回JSONP格式的内容（包裹在回调函数中），但你的后端返回的是纯JSON，因此不生效。
• mode: "no-cors"：会让浏览器屏蔽响应内容，仅允许发送请求但无法获取返回值，所以会得到空响应。
• redirect: "follow"：仅控制重定向行为，不解决CORS头缺失的核心问题。

额外注意事项 #

1. 修改代码后重新部署Web App，确保新代码生效。
2. 若静态页面部署在固定域名，建议将Access-Control-Allow-Origin设置为具体域名（而非*），提升安全性。
3. 测试前清除浏览器缓存，避免旧的响应头残留影响结果。

内容的提问来源于stack exchange，提问作者TumbleWede