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

Question

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

Ogata

Welcome to SO ... how are you returning this response from the server? – Calcite

Please can you show the code you're using to submit the request and the route/controller code that is returning the response. – Hastings

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. – Montgomery

@Calcite yes i am from a laravel controller look at my question here: #68327941 – Babbittry

Answer 1

Maybe your are using this.$inertia, it waits for Inertia response;

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

Please use axios instead

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

Montgomery

What is the use of Inertia.get and post? Please share link i really don't understand the use of Inertia.get, post put etc – Adjudication

This is avoiding the problem with a different framework and kills any inertia routing state. – Fiveandten

Answer 2

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!

Albumenize

A note of caution for this solution: ->with() stores that returned data in the user session. If you're returning a lot of data, this can cause issues. For example, causing the payload column on the sessions table to be too large when using the database session driver. – Dipper

Answer 3

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

Ginglymus

What if you dont want to return a new view? – Babbittry

Adding this 'exposed_headers' => ['x-inertia'] but I had to add '*' to 'paths'[] at cors.php Do you think that this may cause a security risk? – Rector

Answer 4

you can to this

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

Audition

Not working, keep getting this as a response: { "cookies": {}, "transferStats": {} } – Sickle