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

Question

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

Answer 1

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

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

请axios改用

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

Answer 2

迟到的一方回复，但在你的控制器中：

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',
}),

（根据自己的要求调整）

dataprops通过 Inertia 成功更新表单后存在于响应中。无论如何，当我四处寻找答案时帮助了我。

这个答案帮助我到达这里，尽管不完全相同。希望我的回答有帮助！

Answer 3

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

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

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

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

X-Inertia: true

只有浏览器不会将此标头提供给 JavaScript，出于安全原因，这是由您的浏览器完成的。

您可以尝试将其添加到您的 config/cors.php 中：

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

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

Access-Control-Expose-Headers: x-inertia

基于此标头，浏览器将使“X-Inertia”标头可用于 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' ]