I have developed an application using laravel 10, inertia and vue3. Everything works fine locally. I have just uploaded the application to the server, but the links do not work. Let me explain in more detail. If I click on any link, this error message appears:
All Inertia requests must receive a valid Inertia response, however a plain JSON response was received.
Below I show the code used to create the links on the vue components and how the backend interacts. In this example I show how I access an individual page of each product.
Vue component
<script setup>
import {Link} from "@inertiajs/vue3";
</script>
...in template
<h3 class="product-title"> <Link :href="`/products/${product?.slug}`">{{ product?.title }}</Link> </h3>
Laravel
public function show($ref)
{
$product = new ProductResource(Product::where('ref',$ref)->first());
return inertia('Admin/Products/Show', ['product'=> $product ]);
}
If I access any link by simply including the link, it works. The problem appears when I click on any link.
If I copy and pase any link like this it works.
https://ecommerce.deniswebapp.ch/products/dresses-long-winter-black-35
I am including the link to the application so you can test it yourself. This is my first project with Inertia and I cannot understand what the problem might be.
This is the projec link
The response from the server doesn't include the X-Inertia header which is necessary for a valid Inertia response.
The Headers in the response to the XHR request performed when the link is clicked are:
Content-Encoding:
br
Content-Type:
text/html; charset=UTF-8
Date:
Tue, 09 Jan 2024 13:48:17 GMT
Server:
nginx
Vary:
Accept-Encoding
Since the JSON response contains the page object, we can infer that the X-Inertia response header is dropped by Nginx.
I recommend explicitly configuring your server to include the X-Inertia header in the response from the proxy.
proxy_pass_header X-Inertia;