Rails API ActiveStorage DirectUpload 产生 422 错误 InvalidAuthenticityToken [英] Rails API ActiveStorage DirectUpload produce 422 Error InvalidAuthenticityToken

问题描述

我在使用 Rails API 应用程序活动存储时遇到问题.我有 React 从我想上传文件的地方.

I have a problem with Rails API app active storage. I have React from where i want to upload file.

import React from "react";
import {DirectUpload} from "activestorage";

class SignIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      file: null
    };
    this.handleFileChange = this.handleFileChange.bind(this);
    this.handleFileSubmit = this.handleFileSubmit.bind(this);
  }

  handleFileChange(e){
    this.setState({file: e.target.files[0]})
  }

  handleFileSubmit(){
    const upload = new DirectUpload(this.state.file, "/rails/active_storage/direct_uploads");

    upload.create((error, blob) => {
      if(error){
        console.log(error)
      } else {
        console.log(blob)
      }
    })
  }

  render() {

    return (
      <React.Fragment>
          <Form>
          <Form.Item>
            <Input type="file" onChange={this.handleFileChange}/>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              Register
            </Button>
          </Form.Item>
        </Form>
      </React.Fragment>
    );
  }
}

但是在提交时我得到了错误 Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)

But on submit i got error Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)

Started POST "/rails/active_storage/direct_uploads" for 127.0.0.1 at 2019-05-09 22:59:54 +0200
Processing by ActiveStorage::DirectUploadsController#create as JSON
  Parameters: {"blob"=>{"filename"=>"file.jpg", "content_type"=>"image/jpeg", "byte_size"=>27095, "checksum"=>"8u95dXg39vap1Cq/2fgfbg=="}, "direct_upload"=>{"blob"=>{"filename"=>"file.jpg", "content_type"=>"image/jpeg", "byte_size"=>27095, "checksum"=>"8u95dXg39vap1Cq/2fgfbg=="}}}
Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)



ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):

actionpack (5.2.3) lib/action_controller/metal/request_forgery_protection.rb:211:in `handle_unverified_request'
actionpack (5.2.3) lib/action_controller/metal/request_forgery_protection.rb:243:in `handle_unverified_request'
devise (4.6.2) lib/devise/controllers/helpers.rb:255:in `handle_unverified_request'
actionpack (5.2.3) lib/action_controller/metal/request_forgery_protection.rb:238:in `verify_authenticity_token'
activesupport (5.2.3) lib/active_support/callbacks.rb:426:in `block in make_lambda'
activesupport (5.2.3) lib/active_support/callbacks.rb:198:in `block (2 levels) in halting'
actionpack (5.2.3) lib/abstract_controller/callbacks.rb:34:in `block (2 levels) in <module:Callbacks>'
activesupport (5.2.3) lib/active_support/callbacks.rb:199:in `block in halting'
activesupport (5.2.3) lib/active_support/callbacks.rb:513:in `block in invoke_before'

我在 application_controller.rb protect_from_forgery 中设置了::null_session 但我仍然出错.

I set in application_controller.rb protect_from_forgery with: :null_session but i still got error.

推荐答案

我遇到了同样的问题.解决这个问题的两种方法:

I had the same problem. Two ways to solve this :

在 config/initializers/direct_uploads.rb 中:

require 'active_storage/direct_uploads_controller'

class ActiveStorage::DirectUploadsController
  protect_from_forgery with: :null_session
end

2.自定义控制器(推荐)

假设您拥有 /api/v1 的 API 端点:

config/routes.rb

namespace :api do
  scope module: 'v1', path: 'v1' do
    resources :direct_uploads, only: [:create]
  end
end

<小时>

app/controllers/api/v1/direct_uploads_controller.rb

class Api::V1::DirectUploadsController < ActiveStorage::DirectUploadsController
  # Should only allow null_session in API context, so request is JSON format
  protect_from_forgery with: :null_session, if: Proc.new { |c| c.request.format == 'application/json' }

  # Also, since authenticity verification by cookie is disabled, you should implement you own logic :
  before_action :verify_user

  private

  def verify_user
    raise unless User.find(doorkeeper_token[:resource_owner_id])
  end
end

并使用正确的端点更改 DirectUpload 实例:

And change the DirectUpload instanciation with the right endpoint :

const upload = new DirectUpload(this.state.file, "/api/v1/direct_uploads");

希望这会有所帮助.干杯！

Hope this helps. Cheers !

这篇关于Rails API ActiveStorage DirectUpload 产生 422 错误 InvalidAuthenticityToken的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！