Rails中AMP表单的标题设置

时间:2019-06-14 14:33:25

标签: ruby-on-rails ruby amp-html

我在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

但是我确实遵循了官方文档https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests?referrer=ampproject.org提供的CORS示例代码,并且根据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

您能帮我吗?标头可能是我做错了。非常感谢!

1 个答案:

答案 0 :(得分:3)

  

我认为这里的主要问题不是关于未知格式,而是关于   模板

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

request.formats: ["application/json"]

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

因此,我唯一想到的是您的请求响应存在问题。现在再次查看错误消息,它表明您缺少模板。

  

ActionController :: UnknownFormat(InscriptionsController#create为   缺少此请求格式和变体的模板

这样做的原因是您没有从控制器操作中返回任何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尝试为您的控制器找到合适的模板   动作。

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

解决方案:

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

建议

在您提供的链接中注明

  

对于来自允许来源的请求,我们的回复将包含   以下标头:

     

访问控制允许来源:

     

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

     

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

但是您没有在您应设置的Access-Control-Expose-Headers中设置CORS,以便客户端读取enter image description here请求中的其他响应标头。

希望有帮助。