when i use ‘post’ or ‘delete’ routes something goes wrong:
has been blocked by CORS policy: Request header field x-xsrf-token is not allowed by Access-Control-Allow-Headers in preflight response.
Im using laravel 11, vue3
I need to avoid this, because my final mark depends from this 
The thing that draws my attention is that you are getting a CORS error in the first place. CORS errors can only happen if you are making Cross Origin requests, i.e. requests between different hostnames.
If both the frontend and backend are hosted with us, please make sure they are both on the same hostname. For example, if your Vue frontend is on example.com, then the backend should also be on example.com, not api.example.com or example-api.com. Sub-paths are fine, like example.com/api/, but other hostnames are not.
If you don’t do this, your backend will not be reachable by the frontend at all due to security restrictions on our hosting.
If you’re not hosting the frontend and backend with us, please tell us a little bit more about the setup so we can help you more effectively.
It sounds like you’re asking us to do your homework for you.
There are some hosting limitations to keep in mind, but from the error message, I suspect that this is actually a problem with your Laravel site or the URLs you use to access them. And if you are expected to be able to set something like this up to pass your course, then you should be able to do it yourself.
My teacher hasn’t mentioned anything about deploying our work since last Wednesday.
They only said that: if the entire project theory, diagrams, documentation, and code, isn’t deployed, it won’t count at all.
That’s why I had to use this. Because I’m absolutely desperate, and I don’t understand what’s going on.
They didn’t even teach us how to deploy anything online throughout the entire course, so I have no idea how to fix this, and that’s why I’m asking for help.
I’ve spent the past two days trying everything I could think of or find online.
(Sorry for my english, im spanish) And thanks for reading this, it’s nice to see that the owner actually cares
You should check the HTTP requests being made by your Laravel app. Find those problematic POST and DELETE requests. I do not know Laravel in great detail but usually in any PHP framework, there is a routing system. I highly suggest that you should check the routes written inside your Laravel project. It’s possible that the project depends on something outside itself (i.e: external dependencies) and has failed due to CORS (as explained by @Admin). I also came up with slightly similar issue like yours before when I was learning how to code (using different PHP framework). It was usually the external dependencies that gave me a bunch of headaches. External APIs to be exact.
Could you please respond to the first part of my message as well @YingWasTaken? The homework part was a side note I wanted to make, but I am actually trying to help you with the first part.
I deployed everything here (both frontend and backend).
For the routes, I’m using relative paths from the same site at all times (no subdomains, everything on the same host). I’ve been trying different ways to handle them (fetch, Vue Router, and Inertia.js).
The API routes (mysite/api/games/apimethod) all work perfectly, and so do the ones for creating. The ones giving me trouble are the update and delete routes. I’ve tried replicating the structure that worked for the others, but no luck.
For example (my edit game):
Route::put('/games/{game}/update', [UserGameController::class, 'update'])
->middleware('auth')
->name('gamesUser.update');
const payload = { ...this.form };
this.$inertia.put(`/games/${this.form.game_id}/update`, payload, {
onSuccess: () => {
this.$emit('close');
},
});
Locally, everything worked perfectly with fetch, router, and Inertia. I even tried using GET instead of PUT, but I still can’t see where it’s failing.
The same structure, for my add method (using POST), worked without a problem.
I also think it might be some issue with a dependency in vendor, since I use FileZilla to upload files, and each deploy takes 2 hours of waiting. Now that I’ve (mostly) gotten it to work, I’m afraid to break it—so I only upload the cache folder, modified files, and the build.
Sorry if my previous reply came off arrogant—I’m on a tight schedule and pretty stressed. Thanks again for trying to help me.
I had fixed the update route using post instead of put, but i don’t understand why. Post its not supposed to “create” and put to update ? why its working for update.
PS: I fixed it yesterday at 2 a.m. I almost cried from happiness 
Im currently trying to fix the DELETE ones.
That’s a very important distinction!
PUT and DELETE requests are blocked on our hosting, you can only use GET and POST requests. Why that would trigger a CORS error is not clear to me, but switching those requests to POST should solve the issue.
You mentioned this happening for POST requests too, which is why I didn’t mention it before. But if you meant PUT requests, then this is the reason.
You can do that by using the POST method in the frontend and backend.
But Laravel also lets you submit PUT and DELETE requests as POST requests by default, and you can specify the HTTP method by adding a _method field to your request with the actual HTTP method as value. Laravel will then transparently interpret the POST request as a different method.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.