AMP 电子邮件表单导致错误 [amp-form] 表单提交失败：错误：请求 viewerRenderTemplate 失败：错误：Class$obf_1008：答案

【问题标题】：AMP Email form causes error [amp-form] Form submission failed: Error: Request viewerRenderTemplate failed: Error: Class$obf_1008:AMP 电子邮件表单导致错误 [amp-form] 表单提交失败：错误：请求 viewerRenderTemplate 失败：错误：Class$obf_1008：
【发布时间】：2021-03-23 08:26:51
【问题描述】：

表单在 amp 游乐场和 amp Gmail 游乐场中提交得非常好。当我向自己发送电子邮件并在 Gmail 中打开它时，动态内容会正确加载，但在提交表单时，我收到以下错误：

Uncaught (in promise) Error: Class$obf_1008: [https://dynamicmail-pa.googleapis.com/v2/xhrs:proxy?alt=protojson] Cg: Unsupported HTTP status: 400: Class$obf_1007: [object Object]

log.js:258 [amp-form] Form submission failed: Error: Request viewerRenderTemplate failed: Error: Class$obf_1008: [https://dynamicmail-pa.googleapis.com/v2/xhrs:proxy?alt=protojson] Cg: Unsupported HTTP status: 400: Class$obf_1007: [object Object]

我知道这可能是由于 CORS。在我的服务器上，我尝试按照官方文档的建议使用 "@ampproject/toolbox-cors" 库：

const app = express();
const ampCors = require("@ampproject/toolbox-cors");

const cors = require("cors");
app.use(
    ampCors({
        email: true,
        verifyOrigin: false,
        verbose: true
    })
);

我也尝试像这样手动设置所有标题：

const whitelist = [
    "https://playground.amp.dev",
    "https://mail.google.com",
    "https://amp.gmail.dev"
];
const corsOptions = {
    origin: function (origin, callback) {
        console.log("origin", origin);
        if (!origin) {
            return callback(null, true);
        }
        if (whitelist.indexOf(origin) !== -1) {
            return callback(null, true);
        } else {
            return callback(new Error("Origin not in whitelist"));
        }
    }
};

app.use(cors(corsOptions));
app.use((req, res, next) => {
    res.set("AMP-Access-Control-Allow-Source-Origin", "amp@gmail.dev"); //I've changed this to my sender email address when testing from Gmail
    res.set(
        "Access-Control-Expose-Headers",
        "AMP-Access-Control-Allow-Source-Origin"
    );
    res.set("Access-Control-Allow-Credentials", true);
    next();
});

如前所述，这两个在操场上都可以正常工作，但从 Gmail 发布时，表单仍然会导致相同的错误。

【问题讨论】：

你能发布 HTTP 响应的内容吗（可以在 devtool 的 Network 选项卡中找到）？一些面向开发人员的错误消息在响应中，当前未记录到 JS 控制台。
@SuZhang --batch__V0SyTdSGFOz3Ntwv6DZ2oex4lM3vzwD 内容类型：application/http 内容 ID： HTTP/1.1 400 错误请求变化：来源变化：X-来源变化：Referer Content-Type：application/json+protobuf； charset=UTF-8 {"1":3,"2":"Request contains an invalid argument."} --batch__V0SyTdSGFOz3Ntwv6DZ2oex4lM3vzwD-- 我可以看到请求和响应的来源匹配：

标签： cors amp-html amp-email

【解决方案1】：

我从 Google 的某个人那里收到了有关此问题的答复。

使用 enctype=3D"application/x-www-form-urlencoded" 提交的 AMP 表单存在错误，已提交解决。

当我有关于票的更新时，我会更新这个线程。

【讨论】：

对于阅读此答案的任何人：解决方法是从<form> 中删除enctype 属性，使其默认为multipart/form-data。 Gmail 目前在后台将表单数据转换为 application/x-www-form-urlencoded，因此无论是否指定 enctype，它实际上应该具有相同的行为。
仅供参考，现在应该在 Gmail 中修复此错误。