Rails7结合TinyMCE使用ActiveStorage上传图片出现路由错误如何解决？

问题根因 #

你的UploaderController返回的响应格式配置错误，TinyMCE无法正确解析出上传后的图片地址，错误将上传接口路径作为图片地址发起GET请求加载，触发路由不匹配错误。

解决步骤 #

1. 修正上传控制器响应配置 #

删除错误的text/html类型声明，明确返回JSON格式响应：

class UploaderController < ApplicationController
  skip_forgery_protection
  def image
    blob = ActiveStorage::Blob.create_after_upload!(
      io: params[:file],
      filename: params[:file].original_filename,
      content_type: params[:file].content_type
    )
    # 修正响应配置，去掉错误的content_type声明
    render json: {location: url_for(blob)}
  end
end

2. 补充TinyMCE配置 #

新增CSRF请求头、明确上传响应解析规则，避免解析异常：

toolbar:
  - file edit view insert format tools
plugins:
  - image
images_upload_url: '/uploader/image'
# 新增以下配置
images_upload_base_path: '/'
headers: {
  'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
}

请确认应用全局布局文件中存在<%= csrf_meta_tags %>代码，用于生成CSRF令牌。

3. 验证Active Storage路由 #

检查config/routes.rb中是否开启Active Storage路由（Rails 7默认开启，手动关闭过需要恢复）：

# 确保该行未被注释
mount ActiveStorage::Engine => "/rails/active_storage"

可选兜底方案 #

如果仍偶发异常，可以新增GET路由作为兜底，避免报错（不推荐，优先解决根因）：

# config/routes.rb
post 'uploader/image', to: 'uploader#image'
get 'uploader/image', to: 'uploader#image'

内容的提问来源于stack exchange，提问作者Ben