The Laravel API successfully retrieves data in Postman, but when trying to access it in Vue.js, only an

I've been working on a small Laravel API that should respond when an endpoint is accessed. The issue I'm facing is that while the same endpoint returns data in Postman, it appears empty in Vue Js. I've been trying to figure this out for the past two days, and it's really frustrating me. Any assistance would be greatly appreciated. Thank you.

public function search_passport(Request $request){

        $pass = DB::table('passengers')->where('passport_number',$request->input('passport_number'))->get();

        if($pass->count() == 0){
            return response(['message' => 'Passport number not found, please fill the form']);
        }
        return new PassengerResource($pass);
    }// search_passenger

The above snippet shows the code from the controller in the API

Route::post('/searchpassport', [PassengerController::class, 'search_passport']);

And here is the route being used

this.$http.post('searchpassport', this.passport_number, {headers:{
        'Authorization' :  'Bearer ' + this.token.access_token,
        'Accept' : 'application/json',
        'Content-Type' : 'application'
        }})
         .then(res => {
             console.log(res)
         })

This is the API call being made in Vue Js

Answer №1

Suppose that this.$http represents Axios and this.passport_number is a string. It seems that you forgot to specify the field or property name for the request payload, such as "passport_number". Also, your Content-type header appears to be incorrect.

Consider using the following code instead:

this.$http.post("/searchpassport", {
  passport_number: this.passport_number
}, {
  headers: {
    Authorization: `Bearer ${this.token.access_token}`
  }
})

You do not need to include the Accept or Content-type headers. The defaults should suffice.


Utilizing your browser's developer tools for debugging purposes is recommended. The Network tab, in particular, can assist in verifying the headers and data being sent in your HTTP requests, as well as examining the responses received.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for fixing syntax errors after an Angular update

Considering an upgrade to the latest stable Angular branch 1.4.7 from version 1.2.13, there is a customized angular-leaflet-directive in the project that requires syntax changes in a specific function to avoid errors. Error: [$parse:syntax] Syntax Error: ...

What is the syntax for obtaining the return value using executeQuery() in Java?

Here is a code snippet I have: String sql = "UPDATE Players SET Losses=Losses+1 WHERE UUID='" + p.getUniqueId() + "';"; stmt.executeUpdate(sql); I'm looking to retrieve the current Losses value for a specific player, p. Any ideas on how t ...

Adding both days and months to the current date with JavaScript: A helpful guide

Existing script utilizing date.js library <script> var futureDate=Date.today().addMonths(3); </script> ...

How can you use ES6 pure Javascript to set the src attribute of an html collection of images from an array of paths as values for each image?

Currently, I have an array filled with different src values like [path1, path2, path3], and a corresponding HTML collection which has the same number of elements as the array. I am looking for a way to assign each value from the array to set the src attrib ...

Adjusting loop sizes according to category identification

Can anyone help me troubleshoot my code? I am using the category_id where 1 represents shoe sizes and 2 represents apparel sizes. Currently, it is only displaying values for category_id(1) and for category_id(2) it is showing only "Large". Any suggestion ...

Setting the value of an ASP.NET TextBox in the ASP.NET ViewState HiddenField step by step guide

One common issue with ASP.NET TextBox is that when its Text is set with JavaScript, it disappears on postback because it is not stored in ViewState. ViewState is a hidden field created by ASP.NET to save the state of controls. Is there an official way from ...

Receive a 404 error message while navigating through routes in Laravel

I recently came across an interesting tutorial by David Mosher on integrating Angular JS end-to-end. You can check it out on YouTube: http://www.youtube.com/watch?v=hqAyiqUs93c. However, I encountered a bit of trouble while trying to route the /auth/login ...

The art of concealing and compressing JavaScript code

Can modern JavaScript obfuscation and minification tools effectively protect my code from reverse engineering? Which obfuscation platforms are the most reliable in thwarting these attempts? Is it possible that a program could easily deobfuscate the code, ...

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

I recently incorporated jquery Galleria into my website and I am currently facing an alignment issue with the div element gallery-container. Interestingly, it appears correctly aligned in Chrome but is shifted to the right in Firefox. You can view the webs ...

Testing a PHP scheduling program is essential to ensure its functionality and effectiveness. Follow

On my codeigniter app, I have a feature that schedules events for specific dates and times in a MySQL database. These events can be scheduled weeks in advance, and there is also functionality to send email reminders and perform other actions when these d ...

Guide me on setting values in a combobox based on the child value using JavaScript

Currently, I am working on developing an ordering shoe system using ASP.NET MVC. The system involves employees making orders for clients and shipping them out. Each shoe size has its unique stock level, which needs to be displayed in the HTML view. However ...

issue regarding verification using accessToken and refreshToken

I'm looking to utilize React and Laravel Passport for logging in and posting, but I have both an 'access_token' and a 'refresh_token'. Can someone explain when I should be using the 'access_token' versus the 'refresh ...

Do not upload media after recording with getUserMedia

I am facing an issue with getUserMedia where I am unable to upload the video after recording. When I click the "Stop And Upload" button, I receive a null response. Can anyone provide assistance in resolving this? Thank you. Upon clicking the "Stop And Upl ...

"The program developed in Php/Ajax/jQuery/Javascript functions flawlessly on one server but encounters challenges on a different host. The mystery unrav

element, I'm encountering an issue that doesn't seem to be related to any specific code problem. There are no error messages indicating what steps I should take next. Here's the problem: I have a script similar to Facebook's wall feat ...

JSON conversion error: Unable to convert circular structure to JSON - locate problem within JSON structure

Currently, I am utilizing Contentful in conjunction with a MEAN stack. Upon querying the Contentful API, I receive a json object. contentClient.entries(query, function(err, entries){ if (err) throw err; console.log(entries); }); Lately, I have been e ...

Arrange MySQL outcomes based on the datetime of the data entries

Seeking a solution in PHP to merge the outcomes of multiple MySQL queries and organize them into a single array based on their DateTime stamps saved under 'timestamp' in the database. Here is my approach: $reactions = DB::query('SELECT * F ...

Decrease the length of a pre-authorized link

Looking for solutions to speed up the loading of a list containing pre-signed image urls. Is there a method to reduce the size of the images or accelerate their loading time? Experimented with converting images to canvases in an attempt to decrease file s ...

When I use the scrollTop() jQuery method, my browser starts to lag after scrolling

I'm in the process of creating a single page scroll website and everything seems to be working smoothly. However, I've encountered an issue with the scroll to top functionality. When I reach the top of the page and try to scroll down again, the s ...

Begin at the bottom and then move upwards

I am attempting to achieve a bottom-to-top animation on page load for my website. Similar to what is seen on this site: The challenge I'm facing is that my site begins scrolling from midway down the page, rather than starting at the very bottom. T ...

The variable "theSport" is not recognized as a property or method in Vue.js instance

Currently, I am tackling a basic form in VueJs but I'm struggling to pinpoint why my code is throwing an error message. "[Vue warn]: Property or method "theSport" is not defined on the instance but referenced during render" Despite searching extensi ...