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

React cannot be utilized directly within HTML code

I am looking to incorporate React directly into my HTML without the need for setting up a dedicated React environment. While I can see the test suite in the browser, my React app fails to load. Below is the content of my script.js file: I have commented ...

javascripthtmlreactjs

Does the language setting on a browser always stay consistent?

Using javascript, I am able to identify the language of my browser function detectLanguage(){ return navigator.language || navigator.userLanguage; } This code snippet returns 'en-EN' as the language. I'm curious if this i ...

javascripthtmlmultilinguallang

Printing the object name in CreateJS can be achieved by accessing the name property

var stage = new createjs.Stage("demoCanvas"); console.log(stage.constructor.name);//prints a <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script> <script src="https://code.createjs.com/createjs-2015.11.26.mi ...

javascriptcreatejs

ES6 allows for the retrieval of method data within an object

My goal is to improve the organization of my code by creating a config file where I can use the same method to set values. This is just a demonstration, so please keep that in mind. I'm wondering if there's a way to call a function based on wheth ...

javascriptecmascript-6

What is the method to reach a named parameter within a function?

Currently, I am building a RESTful web service using Node JS in combination with Backbone JS. Within this service, there is a specific REST method called GET /users/id/:id, where :id represents the user's identification number. The purpose of this met ...

javascriptnode.jsrestexpress

Unique loading of images without duplication

Hello everyone! I came across a script that loads images sequentially into my div element. It's working well, but I'd like to make it load random images without repeating any until all have been shown. As a newbie in this area, I've made so ...

javascriptjqueryimagerandomrepeat

iOS now supports hardware-accelerated CSS3 transitions for seamless and

I can't seem to get hardware acceleration working with my translate3d for top/bottom positioning. What could be causing the issue? .image { background:yellow; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; ...

javascriptioshtmlcsshardware-acceleration

Avoid duplicate submissions while still enforcing mandatory fields

Let's start with a basic form that only asks for an email address: <form action="NextPage.php" method="post"> <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email"> <button type="submit">Subm ...

javascripthtml

AngularJS - Utilizing Google's Place Autocomplete API Key

Recently, I started digging into Google's APIs and attempting to integrate the Places Autocomplete API with Angular. Although I'm fairly new to autocomplete features in general, I haven't included the jQuery library in my project yet. I&apos ...

javascriptjqueryangularjsautocompletegoogle-places-api

Access a webpage in an html document using URL variables

In the process of developing an MVC web app without utilizing any MVC framework, I have created an index.html file with a section that dynamically loads all the views as needed by the user. However, I encountered an issue where direct URLs such as www.foo. ...

javascriptphphtmlmodel-view-controllerweb

Perform a Selenium action to click on each individual HTML 'a' tag on

I am attempting to automate clicking on all the "a" tags within a website using Selenium in Python. However, I found that all the "a" tags I want to click have the same structure as shown in the code snippet below. I tried clicking them by their class si ...

javascriptpythonhtmlseleniumweb-scraping

What is the best way to extract the .text(data) value and use it within a conditional statement?

My goal here is to create a function that disables a button if a username exists, and enables it if the username is available. I'm not very experienced with JavaScript/jQuery, so I could use some help. Any assistance would be greatly appreciated: $(& ...

javascriptjquery

Sending properties within components using #createElement in React-Router is a convenient way to pass data locally

Have you ever wondered where the parameters Component and props are coming from in the React-Router documentation? // Here is the default behavior function createElement(Component, props) { // ensure all props are passed in! return <Component {... ...

javascriptreactjsreact-router

The 'disabled' property is not found in the 'MatButton' type, however, it is necessary in the 'CanDisable' type

Issue found in node_modules/@angular/material/core/option/optgroup.d.ts: Line 17: Class '_MatOptgroupBase' does not correctly implement interface 'CanDisable'. The property 'disabled' is missing in type '_MatOptgroupBas ...

javascriptangulartypescriptangular-material

Error encountered when calling the function .jstree() on a tree structure

While working on MVC4, I attempted to implement a jstree but encountered an issue where the tree view was not displayed when running my application. Upon investigating with Firebug, I came across the following error message: "TypeError: $(...).jstree is ...

javascriptjqueryasp.net-mvc-4jstree

Locating the right selector for adding a div to its parent element in jQuery

I have come across an interesting HTML structure: <div class="dropdownedit"> <div class="dropbtn">textxyz</div> <div class="dropdown-content" style="display: none;"> <div href="#" class="ocond" id="text1">text1</div> &l ...

javascriptjqueryselector

Adjust the camera in threejs to be positioned inside a different object

My goal is to adjust the camera controlled by trackballControl to match the position of an object. Currently, it's functioning correctly but as demonstrated in this example, each time the camera changes its position, the z value also changes, which i ...

javascriptthree.jscoordinate-transformation

Discover the inner workings of the code below: set a variable called "start" to the current time using the new Date().getTime() method. Create a loop that continuously checks if

I'm having trouble understanding how this code snippet works. Can someone please provide a demonstration? Thanks in advance.... It seems that the code is subtracting 'start' from the current date with new Date, resulting in 0 which is less t ...

javascriptdatetimewhile-loopnew-operator

Tips for setting up Highcharts tooltip.headerFormat using the function getDate() plus 5

I'm facing a little challenge trying to understand how the JavaScript function getDate interacts with Highcharts datetime on xAxis. My goal is to show two dates in the tooltip header, forming a date range like this: 1960/1/1 - 1965/1/1. The first da ...

javascriptdatehighchartstooltipgetdate

Having difficulty running lint on Vue 3 TypeScript application, but building process is successful

We are encountering an issue at the moment. We can successfully build our app, but we are facing challenges with linting using the vue tools (vue-cli-service ...). The hot-reloading feature works initially, but upon saving a file, we receive an error mess ...

typescriptvue.jsbabeljseslintvuejs3