ruby-on-rails - 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 验证，一切正常，

这是我的 Controller :

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

你能帮我解决这个问题吗？我可能对 header 做错了什么。

Answer 1

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

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

request.formats: ["application/json"]

并且您已经在 Controller 操作中指定了 format.json。

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

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

原因是您没有从 Controller 操作返回任何 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
  }

您需要直接从您的 Controller 操作中呈现 json，或者如果您不这样做，则

Rails tries to find an appropriate template for your controlleraction.

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

解决方案:

<强>1。将渲染语句添加到您的 Controller 操作

在那种情况下你可以这样做:

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。创建适当的 View 文件以便 Rails 可以找到它

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

app/views/inscriptions/create.json

建议

在您提供的链接中，有说明

For requests from the allowed origins, our response will contain thefollowing 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在您的创建操作中，应设置该操作以便客户端读取 CORS 中的其他响应 header 请求。