Local development - Request failed with status code 400

[daan-ef2]

Hi all,

I'm just getting started with druxt, while I've been developing a lot of time with Gatsby and Wordpress, i am keen to learning this.
But at the moment i am stuck while building my first druxtjs site.

Describe the bug
When running "npm run dev" it quits with the following message: "FATAL Request failed with status code 400".

My drupal site is hosted locally and the jsonapi endpoint is working in the browser. I also set the correct link as baseUrl in the nuxt.config.js: http://backend.test

But still no dice, I also tested it with one of the examples and when changing the baseUrl to a local development url, it gives me the same message. When using https://demo-api.druxtjs.org it works.

Does anyone encountered the same problem?

[Decipher]

Hi @daan-ef2,

Can you provide your nuxt.config.js file, or the Druxt settings from the file?

What are you using to run your Drupal site? DDev, Lando, docker-compose, etc.

If it the frontend connects to the hosted backend, and the JSON:API is accessible in a browser, it's likely the communication between the frontend and backend.

If you are using docker containers, ensure they can access each other.

[daan-ef2]

Hi,

Thanks for your fast reply. Drupal is running on Laravel valet on my local machine.
My config file:

const baseUrl = 'http://backend.test'

export default {
  build: {
    extend(config) {
      config.resolve.alias.vue$ = 'vue/dist/vue.esm.js'
    },
  },
  components: true,
  buildModules: ['@nuxtjs/vuetify'],
  modules: ['druxt-entity'],
  druxt: { baseUrl },
}

edit: formatting

[Decipher]

Hi @daan-ef2,

The configuration looks fine, and as you stated, it works with other backends.

I've never used Laravel Valet before, but based on my understanding of the documentation, it runs locally, using DnsMasq to proxy. This "should" be fine, but all my development has been based on using docker based environments.

I will try to install Laravel Valet to test myself and see if I can confirm the cause if I encounter the issue.

There may be something of use here: https://laravel.com/docs/8.x/valet#proxying-services

You can also try enabling the Druxt API proxy:

export default = {
  ...
  druxt: {
    baseUrl,
    proxy: { api: true }
  }
}

However, that is primarily for Clientside requests, and your OP implied that the error occurred server side?

Can you also try to Curl http://backend.test/jsonapi from terminal and see if it is able to access the API?

[ghost]

Hi mate,
Been away for some time, gonna try again next week and I'll update you on my progress.

Thanks for your help so far.

[Decipher]

Let me know how you go.

I still haven't had a chance to install Laravel Valet locally, but it's on my todo list so I can confirm if this is a bug.

[ghost]

Hi,

Back again ;-) (other account), when trying to access the jsonapi via browser (chrome) or via CURL the following message appears:

{"jsonapi":{"version":"1.0","meta":{"links":{"self":{"href":"http://jsonapi.org/format/1.0/"}}}},"errors":[{"title":"Bad Request","status":"400","detail":"The following query parameters violate the JSON:API spec: \u0027q\u0027.","links":{"via":{"href":"http://ef2-backend.test/jsonapi"},"info":{"href":"http://jsonapi.org/format/#query-parameters"}}}]}%

So its expects a Q parameter, hence the 400 error. Is this because my Drupal installation is not correct?

[ghost]

Hi,

I guess I need a new pair of glasses. Read the error again and it was clear. Found a solution over here:
https://www.drupal.org/project/jsonapi/issues/2984044

After a cache rebuild i finally have a result and can start playing with Druxt 👍