所有 Inertia 请求都必须收到有效的 Inertia 响应，但是收到的是普通的 JSON 响应

Question

我正在尝试理解和解决这个 InertiaJs 错误，但没有成功，我希望我能在这里得到一些帮助。

Answer 1

你可以这样

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

Answer 2

也许你正在使用this.$inertia，它等待惯性响应；

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

请使用axios。相反

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

Answer 3

如果您将 Laravel Jetstream 与托管在一个域上的 Inertia 前端一起使用，而另一个域托管您的 Laravel 后端，则 CORS 可能与此行为有关.

我遇到了同样的问题，在查看 innertia.js 的代码后，我发现了这个，它可以触发模态，它在响应的 header 中寻找 'x-inertia'：

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

已经在响应的 header 中（如果您使用 Inertia::render）：

X-Inertia: true

只是浏览器没有让 header 对 javascript 可用，这是出于安全原因由您的浏览器完成的。

您可以尝试将此添加到您的 config/cors.php :

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

如果您使用浏览器的网络检查器，您会在响应中看到添加的 header：

Access-Control-Expose-Headers: x-inertia

基于此 header，浏览器将使 'X-Inertia' header 可供 javascript 使用（弹出窗口将消失）。

考虑到 CORS 是一种安全措施，以这种方式添加内容可能会带来安全风险，尤其是在使用通配符而不是定义的值时，为了完成并使这个示例正常工作，config/cors。php 也需要这个 :

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

Answer 4

派对迟到回复，但在您的控制器中：

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

然后在前端：

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

this.form，在我的例子中，在data(){ ...

中设置如下

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

（根据您的要求调整）

通过 Inertia 成功更新表单后，

data 存在于 props 响应中。无论如何，当我四处寻找答案时帮助了我。

帮我走到了这里，虽然不太一样。希望我的回答对您有所帮助！

所有 Inertia 请求都必须收到有效的 Inertia 响应，但是收到的是普通的 JSON 响应

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

inertiajs

laravel

vue.js

jetstream