AMP请求报错：响应需包含AMP-Access-Control-Allow-Source-Origin头求助

Problem Description #

I'm hitting an issue with AMP form submissions on my site:

• When accessing my AMP page through the Google AMP Cache (https://www.google.com.tr/amp/s/www.example.com/amp), form submissions work perfectly.
• But when accessing the AMP page directly via my domain (https://www.example.com/amp), form submissions fail with the error:
  Response must contain the AMP-Access-Control-Allow-Source-Origin header

Here's the breakdown of the request/response details from a successful cache-based submission (the failed direct-access submission is missing the required header in the response):

Successful Response Headers (Cache Access):

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:https://www-example-com.cdn.ampproject.org
AMP-Access-Control-Allow-Source-Origin:https://www.example.com
AMP-Control-Expose-Headers:AMP-Access-Control-Allow-Source-Origin
AMP-Same-Origin:true
Cache-Control:no-cache
Content-Length:3
Content-Type:text/html; Charset=utf-8
Date:Thu, 18 Jan 2018 11:47:52 GMT
Server:Microsoft-IIS/8.5
X-Powered-By:ASP.NET
X-Powered-By-Plesk:PleskWin

Successful Request Headers (Cache Access):

Accept:application/json
Accept-Encoding:gzip, deflate, br
Accept-Language:tr-TR,tr;q=0.9,en-US;q=0.8,en;q=0.7
Connection:keep-alive
Content-Length:707
Host:www.example.com
Origin:https://www-example-com.cdn.ampproject.org
Referer:https://www-example-com.cdn.ampproject.org/v/s/www.example.com/amp/gc/hbt.html?usqp=adadadas&amp_js_v=0.1
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1

Query String Parameters (Cache Access):

__amp_source_origin:https://www.example.com

Root Cause #

The issue lies in your server's response logic: right now, it only returns the AMP-Access-Control-Allow-Source-Origin header when the request comes from the AMP Cache domain (https://www-example-com.cdn.ampproject.org).

When you access the AMP page directly via your own domain, the form submission's Origin header will be https://www.example.com (your domain), and your server isn't returning the required AMP-Access-Control-Allow-Source-Origin header for this scenario.

AMP's specification mandates that this header must be present for all AMP form submissions—regardless of whether the request comes from the cache or your direct domain. The header's value should match either the __amp_source_origin query parameter (sent by AMP clients) or the request's Origin header.

Fix Steps #

To resolve this, you need to adjust your server-side code (IIS/ASP.NET in your case) to dynamically set the required headers for all valid AMP form requests:

1. Dynamically set AMP-Access-Control-Allow-Source-Origin:

   • Check for the __amp_source_origin query parameter first (this is sent by AMP clients to identify the original source of the AMP page).
   • If that parameter isn't present, fall back to the request's Origin header.
   • If both are missing, default to your AMP page's base domain (https://www.example.com).

2. Ensure AMP-Control-Expose-Headers includes the required header:

   • This tells the browser that it's allowed to access the AMP-Access-Control-Allow-Source-Origin header, which AMP needs for validation.

3. Update Access-Control-Allow-Origin for direct domain requests:

   • Instead of hardcoding it to the AMP Cache domain, dynamically set it to match the request's Origin header (this handles both cache and direct domain requests).

Example ASP.NET Code Snippet

Add this logic to your form submission endpoint:

// Get the AMP source origin from query param or request origin
string ampSourceOrigin = Request.QueryString["__amp_source_origin"];
string requestOrigin = Request.Headers["Origin"];
string allowedSourceOrigin = !string.IsNullOrEmpty(ampSourceOrigin) 
    ? ampSourceOrigin 
    : (string.IsNullOrEmpty(requestOrigin) ? "https://www.example.com" : requestOrigin);

// Add the required AMP headers
Response.Headers.Add("AMP-Access-Control-Allow-Source-Origin", allowedSourceOrigin);
Response.Headers.Add("AMP-Control-Expose-Headers", "AMP-Access-Control-Allow-Source-Origin");

// Set CORS origin dynamically
if (!string.IsNullOrEmpty(requestOrigin))
{
    Response.Headers.Add("Access-Control-Allow-Origin", requestOrigin);
}

Alternative: IIS URL Rewrite Configuration

If you prefer using IIS's URL Rewrite module instead of code, you can create rules to set these headers dynamically based on request parameters and headers.

Verification #

After making the changes:

1. Directly access https://www.example.com/amp and submit the form.
2. Open your browser's DevTools (Network tab) and check the response headers for the form submission request.
3. Confirm that AMP-Access-Control-Allow-Source-Origin is present and set to https://www.example.com (or the value of __amp_source_origin if present).

内容的提问来源于stack exchange，提问作者Barış Tekin