12

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

Rwd
  • 34,180
  • 6
  • 64
  • 78
Ismael Kourouma
  • 139
  • 1
  • 1
  • 6
  • Welcome to SO ... how are you returning this response from the server? – lagbox Jan 02 '21 at 03:18
  • Please can you show the code you're using to submit the request and the route/controller code that is returning the response. – Rwd Jan 02 '21 at 15:44
  • 1
    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 Apr 19 '21 at 16:06
  • @lagbox yes i am from a laravel controller look at my question here: https://stackoverflow.com/questions/68327441/laravel-8-jetstream-inertia-all-inertia-requests-must-receive-a-valid-inertia-re – ii iml0sto1 Jul 10 '21 at 13:54

4 Answers4

16

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)
  })
stckvrw
  • 1,689
  • 18
  • 42
Manuel Eduardo Romero
  • 831
  • 9
  • 9
  • 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 – Neha Sep 23 '22 at 06:55
  • This is avoiding the problem with a different framework and kills any inertia routing state. – ahinkle Mar 08 '23 at 17:15
9

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!

Daze
  • 506
  • 1
  • 6
  • 6
  • 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. – Drowsy Apr 10 '23 at 19:12
5

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' ]
Jan
  • 51
  • 1
  • 2
3

you can to this

axios.get("http://example.com",).then((res) => {
   console.log(res.data)
})
Kenedy Nopriansyah
  • 610
  • 4
  • 6