All Inertia requests must receive a valid Inertia response, however a plain JSON response was received

2
votes

i am trying to understand and resolve this InertiaJs error without success i hope i can get some help here. valid Inertia response

3
laravelvue.jsjetstreaminertiajs
Welcome to SO ... how are you returning this response from the server? - lagbox
Please can you show the code you're using to submit the request and the route/controller code that is returning the response. - Rwd
The response is correct if you use axios or ajax. But using inertia, the client will wait for a inertia response. Looking for some solution too. - Manuel Eduardo Romero
@lagbox yes i am from a laravel controller look at my question here: stackoverflow.com/questions/68327441/… - ii iml0sto1

3 Answers

3
votes

you can to this

axios.get("http://example.com",).then((res) => {
   console.log(res.data)
})
2
votes

Maybe your are using this.$inertia, it wait for Inertia resopnse;

this.$inertia.get(route('example'))
  .then(res => {
     console.log(res)
  })

Please use axios. instead

axios.get(route('example'))
  .then(res => {
     console.log(res)
  })
1
votes

If you are using Laravel Jetstream with the Inertia frontend hosted on one domain and another domain to host your Laravel backend, then CORS could have something to do with this behaviour.

I had the same problem, after looking in the code from innertia.js, I found this, which can trigger the modal, it is looking for 'x-inertia' in the headers of the response:

isInertiaResponse(response) {
    return response?.headers['x-inertia']
}

Which is already in the header of the response (if you use Inertia::render):

X-Inertia: true

Only the browser is not making this header available to javascript, this is done by your browser for security reasons.

You could try and add this to your config/cors.php :

'exposed_headers' => ['x-inertia']

If you use your network inspector of your browser you will see an added header in the response :

Access-Control-Expose-Headers: x-inertia

Based on this header, the browser will make the 'X-Inertia' header available to javascript (and the popup will disappear).

Consider that CORS is a security measure, adding things this way, can pose a security risk, especially when using wildcards instead of defined values, to be complete and make this example work, config/cors.php also needs this :

'allowed_origins' => ['your-frontend.domain'],
'paths' => [ '/path-you-are-requesting' ],
'allowed_methods' => [ 'GET' ]
'allowed_headers' => [ 'content-type,x-inertia,x-inertia-version,x-requested-with' ]