Search code examples
corsamp-htmlamp-email

AMP Email form causes error [amp-form] Form submission failed: Error: Request viewerRenderTemplate failed: Error: Class$obf_1008:


The form submits perfectly well in the amp playground and the amp Gmail playground. When I send myself the email and open it in Gmail, the dynamic content loads correctly but on submitting the form, I get the following errors:

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]

I understand this is likely due to CORS. On my server, I have tried using the "@ampproject/toolbox-cors" library as suggested by the official documentation as so:

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

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

I've also tried to manually set all of the headers like so:

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", "[email protected]"); //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();
});

Both of these work fine in the playground as mentioned but the forms still cause the same error when posted from Gmail.


Solution

  • I've received an answer from someone at Google about this.

    There's a bug with AMP forms submitting with enctype=3D"application/x-www-form-urlencoded" which has been submitted for resolution.

    I'll update this thread when I have an update on the ticket.