Rails + Vue.js axios POST getting 406 Unknown Error

Question

I've seen different questions with the same issue but none did fix my error.

I'm getting 406 Unknown format when posting a new campaign record with a form and axios, and can't figure why since I'm specifying the json format in the controller:

Errors

spread.js:25 POST http://localhost:4000/campaigns 406 (Not Acceptable)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>Action Controller: Exception caught</title>


    <header>
      <h1>
        ActionController::UnknownFormat
          in CampaignsController#create
      </h1>
    </header>

Routes file

resources :campaigns

Campaigns controller

  def create
    @campaign = Campaign.new(campaign_params)
    if current_user
      @campaign.user_id = current_user.id
    end
    respond_to do |format|
      format.json do
        if @campaign.save
          format.json { render :show, status: :ok, location: @campaign }
        else
          format.json { render json: @campaign.errors, status: :unprocessable_entity }
        end
      end
    end
  end

Form

methods: {
      submit() {
        var data = new FormData()
        data.append('box', this.campaign.selectedBox.id)
        for (const product of this.campaign.selectedProducts) {
          data.append('products[]', product.id)
        }
        data.append('image', this.campaign.photo1)
        data.append('campaign', this.campaign.id)
        axios.interceptors.request.use(config => {
          config.paramsSerializer = params =>
            qs.stringify(params, {
              arrayFormat: 'brackets',
              encode: false
            });

          return config
        })
        axios.post('/campaigns', data, {
            headers: {
                'Content-Type': 'application/json',
            }
        }).then((response) => {
          location.href = response.data.url
        }).catch((error) => {
          console.log(error.response.data)
        })
      },

¿Am I missing something? Thanks in advance.

Are you setting any `Accept-*` request headers in Axios prior to calling `axios.post('/campaigns')...`? — Brian Lee, Nov 24 '20 at 21:25
A 406 error code usually indicates the client is making a request with one or more of the `Accept-*` headers set. For example, client may set `Accept: application/xml` but the server is unable to respond with appropriate content type. Have you looked at the browser's web inspector and verified the request is as expected? — Brian Lee, Nov 24 '20 at 21:30
This is what I see in the response headers: Content-Type: text/html; charset=UTF-8, shouldn't it be JSON? — Gibson, Nov 24 '20 at 21:32
I added the headers to the axios config (updated question) but still throws the same error... I think it's a Rails controller issue (updated question). — Gibson, Nov 24 '20 at 21:48
You're setting the `Content-Type` header, change that to `Accept` and see if it makes any difference. [Accept header docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept). — Brian Lee, Nov 24 '20 at 21:51
Have you looked at these answers: https://stackoverflow.com/questions/22943892/actioncontrollerunknownformat — Brian Lee, Nov 24 '20 at 21:58

score 0 · Answer 1 · answered Mar 05 '21 at 13:19

The code above is using Rails resources (routes.rb) without defining a default format and an Axios POST request that doesn't specify a format.

When you submit the POST request check the rails server log and see how the controller is processing the request. I'd anticipate the above will generate the line: "Processing by CampaignsController#create as HTML".

Try either defining a default format in the routes file (https://guides.rubyonrails.org/routing.html#defining-defaults):

defaults format: :json do
  resources :campaigns
end

or specifying a format for the POST request.

axios.post('/campaigns.json', ...)...

Rails + Vue.js axios POST getting 406 Unknown Error

1 Answers1