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

Question

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

laravelvue.jsjetstreaminertiajs

13

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

- Ismael Kourouma

欢迎来到SO...你是如何从服务器返回这个响应的？ - lagbox

请问您能否展示一下用于提交请求的代码以及返回响应的路由/控制器代码。 - Rwd

1

如果使用axios或ajax，则响应是正确的。但是，在使用inertia时，客户端将等待inertia响应。正在寻找一些解决办法。 - Manuel Eduardo Romero

@lagbox 是的，我来自 Laravel 控制器，请看我的问题：https://stackoverflow.com/questions/68327441/laravel-8-jetstream-inertia-all-inertia-requests-must-receive-a-valid-inertia-re - ii iml0sto1

4个回答

10

虽然略晚回复，但在您的控制器中：

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

(根据您的需求调整)

在通过惯性成功更新表单后，data 存在于 props 响应中。这个答案帮助了我，当时我正在寻找一个答案。

这个答案帮助了我到达这里，虽然不完全相同。希望我的答案有所帮助！

- Daze

对于这个解决方案需要注意：->with() 将返回的数据存储在用户会话中。如果你返回了大量数据，这可能会导致问题。例如，在使用 database 会话驱动程序时，会导致 sessions 表上的 payload 列过大。 - Drowsy

5

如果您正在使用在一个域上托管的惯性前端和另一个域来托管您的Laravel后端，则CORS可能与此行为有关。

我有同样的问题，在查看innertia.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' ]

- Jan

2

如果您不想返回一个新视图，该怎么办？ - ii iml0sto1

在cors.php中添加'exposed_headers' => ['x-inertia']，但我不得不将'*'添加到'paths'[]。您认为这可能会导致安全风险吗？ - Mostafa Said

3

你能做到这一点。

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

- Kenedy Nopriansyah

无法工作，一直收到以下响应：{ "cookies": {}, "transferStats": {} } - Benny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manuel Eduardo Romero · Accepted Answer

如果您正在使用this.$inertia，它会等待Inertia响应；

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

请使用 axios 替代

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