Headers Rails 中的 AMP 表单设置

Question

我在 Rails 中的 AMP 表单在终端中返回此错误：

Completed 406 Not Acceptable in 338ms (ActiveRecord: 54.1ms)
ActionController::UnknownFormat (InscriptionsController#create is missing a template for this request format and variant.
request.formats: ["application/json"]
request.variant: []):

在浏览器中：

POST http://localhost:3000/inscriptions?__amp_source_origin=http%3A%2F%2Flocalhost%3A3000 406 (Not Acceptable)
Response must contain the AMP-Access-Control-Allow-Source-Origin header
Form submission failed: Error: Response must contain the AMP-Access-Control-Allow-Source-Origin header
at bb.f.assert (https://cdn.ampproject.org/v0.js:21:319)
at y (https://cdn.ampproject.org/v0.js:26:213)
at https://cdn.ampproject.org/v0.js:179:339

但是我确实按照官方文档提供的CORS示例代码https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests?referrer=ampproject.org，根据AMP验证，一切正常，

这是我的控制器：

def create
  @inscription = Inscription.new(inscription_params)
  @inscription.save
  subscriber_email = inscription_params[:email].downcase
  if Subscriber.where(email: subscriber_email).count == 0
    @subscriber = Subscriber.new
    @subscriber.email = subscriber_email
    @subscriber.save
    @new_subscriber = true
  else
    @subscriber = Subscriber.where(email: subscriber_email).first
    @new_subscriber = false
  end
 [...]
 respond_to do |format|
  format.html { redirect_to root_path, notice: "Merci ! Nous avons bien reçu votre inscription !" }
  format.js
  format.json {
    allowed_origins = ["https://example.com", "https://example.com.cdn.ampproject.org/", "http://example.com.amp.cloudflare.com", "https://cdn.ampproject.org"]
    allowed_source_origin = "https://example.com"
    source_origin = params[:__amp_source_origin]
    origin = request.headers["Origin"]
    response.set_header('Content-type', 'application/json')
    response.set_header('Access-Control-Allow-Credentials', 'true')
    response.set_header('Access-Control-Allow-Origin', origin)
    response.set_header('AMP-Access-Control-Allow-Source-Origin', source_origin)
    p response.headers
  }
  end
end

你能帮我解决这个问题吗？我可能对 headers 做错了什么。非常感谢！

Answer 1

I think the main issue here is not about unknown format, it's about template

在您显示的错误中，很明显您在请求中发送了正确的 Content-Type

request.formats: ["application/json"]

并且您已在控制器操作中指定 format.json。

所以我唯一想到的是你的请求的响应有问题。现在再次查看错误消息，它说您缺少模板。

ActionController::UnknownFormat (InscriptionsController#create is missing a template for this request format and variant

原因是您没有从控制器操作

返回任何 json 响应

format.json {
    allowed_origins = ["https://example.com", "https://example.com.cdn.ampproject.org/", "http://example.com.amp.cloudflare.com", "https://cdn.ampproject.org"]
    allowed_source_origin = "https://example.com"
    source_origin = params[:__amp_source_origin]
    origin = request.headers["Origin"]
    response.set_header('Content-type', 'application/json')
    response.set_header('Access-Control-Allow-Credentials', 'true')
    response.set_header('Access-Control-Allow-Origin', origin)
    response.set_header('AMP-Access-Control-Allow-Source-Origin', source_origin)
    p response.headers
  }

您需要直接从您的控制器操作中渲染 json，或者如果您不这样做，则

Rails tries to find an appropriate template for your controller action.

我认为这是导致此错误的主要原因。

解决方案：

1.将渲染语句添加到您的控制器操作

在这种情况下，您可以这样做：

format.json {
    allowed_origins = ["https://example.com", "https://example.com.cdn.ampproject.org/", "http://example.com.amp.cloudflare.com", "https://cdn.ampproject.org"]
    allowed_source_origin = "https://example.com"
    source_origin = params[:__amp_source_origin]
    origin = request.headers["Origin"]
    response.set_header('Content-type', 'application/json')
    response.set_header('Access-Control-Allow-Credentials', 'true')
    response.set_header('Access-Control-Allow-Origin', origin)
    response.set_header('AMP-Access-Control-Allow-Source-Origin', source_origin)
    p response.headers

    render json: {}, status: :ok
  }

2。创建适当的视图文件，以便 Rails 可以找到它

Rails 将尝试在控制器名称的目录名称中查找名称与控制器操作名称相同的视图文件。所以在你的情况下，因为控制器的名称是 InscriptionsController 所以你的文件应该是

app/views/inscriptions/create.json

建议

在您提供的link中，说明

For requests from the allowed origins, our response will contain the following headers:

Access-Control-Allow-Origin:

AMP-Access-Control-Allow-Source-Origin:

Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin

但是您没有设置 Access-Control-Expose-Headers in your create action which should be set in order for client to read additional response headers in CORS 请求。

希望对您有所帮助。

Headers Rails 中的 AMP 表单设置

Headers setting for AMP form in Rails

ruby-on-rails

ruby

amp-html

解决方案：

建议