'All Inertia requests must receive a valid Inertia response, however a plain JSON response was received [closed]

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

laravelvue.jsjetstreaminertiajs


Solution 1:[1]

you can to this

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

Solution 2:[2]

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' ]

Solution 3:[3]

Late to the party replying, but in your controller:

return Redirect::back()->with([
  'data' => 'Something you want to pass to front-end',
])

Then on the front end:

this.form.post(route(...), {
  onSuccess: (res) => {
    this.form.data = res.props.data
  },
})

this.form, in my case, is set as the following in data(){ ...

form: this.$inertia.form({
  _method: 'PUT',
}),

(Adjust to your requirements)

data exists within the props response after a successful form update via Inertia. Helped me when I was digging around for an answer anyway.

This answer helped me get here, although not quite the same. Hope my answer helps!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kenedi Novriansyah
Solution 2
Solution 3 Daze

Related Questions