Use Vue JS to send a GET request to the server with custom header settings

When creating a Vue.js component, I want to send a GET request to a server with specific headers. How can I achieve this?

Using cURL:

-X GET "http://134.140.154.121:7075/rest/api/Time" -H "accept: application/json" -H "Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IkFZd21VU0Jvd2lxcVRSRG81NTctVFEiLCJ0eXAiOiJhdCtqd3QifQ.eyJuYmYiOjE1OTMfryyw"

The response body contains the following information:

{ "values": { "value": "string" } }

How can I include header and authentication settings in my request?

javascriptvue.jsrequesthttp-headersrequest-headers

Answer №1

  fetch("http://134.140.154.121:7075/rest/api/Time",{
        method:'GET',
        header:{
             'accept': 'application/json',
             'Authorization': 'Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IkFZd21VU0Jvd2lxcVRSRG81NTctVFEiLCJ0eXAiOiJhdCtqd3QifQ.eyJuYmYiOjE1OTMfryyw'
        }
    })
.then(response => response.json())
.then(responseData => {
      // Utilize the responseData here
}

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 aligning pagination in the MUI v5 table component and creating a fixed column

I am currently experimenting with MUI table components and have created an example below with pagination. const MuiTable = () => { const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(5); const [data, setData] ...

javascriptreactjsmaterial-uipagination

The functionality of Material Autocomplete is not compatible with InputProps

I am experiencing an issue with customizing the border of my TextField within my Autocomplete component. When I include the InputProps prop, the Autocomplete stops rendering Chips <Autocomplete multiple freeSolo options={options} render ...

javascriptreactjsautocompletematerial-uitextfield

Executing a single Function within the UseEffect Hook

Can anyone assist me with solving this code puzzle? I have a carousel element that includes icons for moving to the previous and next slides. Whenever these icons are clicked, a specific function needs to be triggered within the useEffect() hook. The spec ...

javascriptreactjsreact-hooks

Is there a way to ensure that the selected value remains displayed on the select menu even after

Here is a sample code for a status select input: <label>Status:</label> <v-select :options="options" v-model="status" @input="changeValueStatus" /> data() { return { options: [ { label: 'Su ...

vue.js

Creating a v-for in a component without using v-bind

I am currently utilizing PHP for my backend and Vue for my frontend. My PHP code reads mock folders using scandir() and returns a JSON object which I successfully retrieve in my Vue component. However, I'm facing difficulty in looping through this obj ...

phpvue.jsvue-componentv-forscandir

What are the steps for setting up API REST calls proxy for a frontend hosted on Netlify?

While testing locally, I am able to successfully post a call and access it through Netlify. However, once I host the frontend app on Netlify, the POST Proxy is being set to the Netlify URL. The hosted URL: Upon clicking "Sign Up" and then clicking on "Si ...

javascriptreactjsapipostnetlify

transmit JSON formatted form data to an AngularJS platform

I have a webpage built on AngularJS with a login feature. I want to iframe this webpage onto my own page and automatically log in my users. Upon inspecting the AngularJS site, I noticed that the login procedure expects a json object. I have tried multipl ...

javascriptphpjqueryangularjsjson

Using Chart.js to display JSON data in a graphical format

I am facing an issue and need some help. I have gone through various tutorials and questions, but none of them seem to address my specific problem. When making an ajax request to my PHP file, I receive a JSON response like this (as seen in the console log) ...

javascriptjqueryjsonchart.js

How come my image is not appearing on Vue.js when fetched from the API?

While working on my laravel vue project, I encountered an issue where the image is not being fetched from the backend API. All other data is being displayed correctly except for the image. JSON: [ { "id": 1, "name": ...

laravelvue.js

Tips for sending an HTML form through Ajax, storing the data in a file, and then showcasing the results in a div

Embarking on my journey in Web Development, I am currently delving into JavaScript (specifically JQuery) and have decided to kick things off with a Simple Chat project. However, I'm facing an issue with preventing the page from refreshing after a mess ...

javascriptphphtmljqueryajax

Using React's useEffect and useContext can cause issues with certain components, particularly when dealing with dynamic routes

Currently, I am developing a React blog application where posts are stored in markdown files along with metadata in Firestore. The content .md files are saved in Cloud Storage. In the App component, I utilize useEffect to retrieve the metadata for each pos ...

javascriptreactjsuse-effectreact-contextuse-context

I am attempting to input the form data, but all I see on the console is "null" being printed

I am facing an issue where the console.log(data) statement is printing null on the console. I am trying to send the form data (with id "myform") to a Java backend post method, but for some reason the code is not functioning correctly. Can anyone identify ...

javascriptajax

Tips for eliminating the trailing slash from the end of a website article's URL

I've recently delved into learning Gatsby, and I've encountered an issue with the Open Graph tag in my project. The og:image is displaying a different image than the intended thumbnail for the article. Here's an example article - . When try ...

javascriptnode.jsreactjsgatsbygatsby-image

Retrieve the direction of panning when the panning stops with hammer.js and limit the possible

I have integrated the hammer.js library along with its jQuery plugin. I followed the documentation and used the following code to initialize it on .game-card-mobile divs: /* Creating a Hammer object for swipeable game cards */ var $gameCard = $('.gam ...

javascriptjqueryhammer.js

Rendering issue with component

I am encountered with a situation where one component is failing to render its sub-component. Surprisingly, there are no visible errors in the console. The data I'm expecting from the web call is also coming through without any issues. However, for so ...

javascriptreactjsecmascript-6

Simulating a mobile device screen size using an embedded iframe

Imagine this scenario: What if instead of adjusting the browser window size to showcase a responsive web design, we could load the site into an IFRAME with the dimensions of a mobile screen. Could this concept actually work? Picture having an IFRAME like ...

javascripthtmlcss

`Unveil the hidden edges of the Google timeline chart`

Does anyone know how to remove the chart border from a Google timeline chart using this script? <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load ...

javascriptchartsgoogle-visualizationtimeline

When using Node.js with Express and ssh2, my data structures remain intact without any resets when loading web pages

To display jobs sent by users to a cluster, the code below is used (simplified): var split = require('split'); var Client = require('ssh2').Client; var conn = new Client(); var globalRes; var table = [["Head_1","Head_2"]]; module.exp ...

javascriptnode.jsexpress

Is there a way to retrieve the properties of another function within the same component?

I am trying to place NumberFormat inside OutlinedInput and I also need different properties for the format of NumberFormat. (There will be a select window that defines which format property to use). This is what I have: import OutlinedInput from "@ma ...

javascriptreactjsmaterial-ui

Desktop display issue: Fontawesome icon not appearing

Having trouble getting the fontawesome icon to display properly on my website. It appears in inspect mode, but not on the actual site itself. Any suggestions on how to fix this issue? import React, { Fragment, useState} from "react"; import { Na ...

javascripthtmlcssreactjsfont-awesome