CORS header 'Access-Control-Allow-Origin' missing - How to fix major errors in your API CORS
My account with a basic step-by-step with my process to resolve an error related to CORS (Cross-origin Resource Sharing) in a project where an api was created in laravel, a sourcend hosted on a separate server in vue.js and using axios to perform the requests
1 - what is cors?
CORS is a mechanism used by browsers to share resources between different sources. And it makes use of HTTP headers to inform browsers whether a certain resource can be accessed or not. - more information on the reference page
2 - How to solve it?
It sounds obvious but I've come across this error. Laravel I was developing an API in PHP in Laravel and the request worked in postman, but it didn't work in my application. I was sure I had set everything upright, but it was my first time using laravel. When I went to test with postman (look at tip 1) I realized that despite having configured my header, I didn't give access to my origin.
- Tip number 1
Test by looking at the postman header. By using postman and requesting your api you will receive a lot of interesting information. But it doesn't mean that if your api works in postman it works in the browser. Because there is the Cross-origin Resource Sharing system and the information will have to pass in this second method. So it's worth noting a tab next to the tab that you can see the response of your information, something like this:
in this case you should ask yourself: Is your api header configured correctly?
Well mine wasn't, so I solved the problem with the api in php in laravel by adding the following command lines on top of my api.php:
If you're a thoughtful and careful programmer, you might have thought something like: "no security" Because fetuses allow everyone access to your api and an insecure option, not to mention completely irresponsible. I know, but you have to understand that I was a desperate programmer trying to solve a problem. The security theme is for another post, not this one!
- Tip number 2
To be completely honest so far I'm not quite sure the logic behind my solution, but the problem apparently was that I was using one axios request within another. And I know a lot of you are going to laugh in my face and say you can't do that, and that's okay.
But the point is: If you noticed that you don't have any more errors with your api, then the error is probably in your request
With that information what you can do is something called the rubber duck method. Have you ever heard of him?
If not, don't worry. I will teach him here.
This is the method I use to resolve almost all my errors. And it's very simple:
- (optional) Buy a rubber duck.
- Describe your code out loud to the duck, as if you were explaining it to someone.
- don't expect the duck to respond, but know that by explaining everything that's going on in the code and logic, the solution should come naturally.