"Securing Your Web Application with Customized HTTP Headers

I'm currently working on setting up a POST request to a REST API (Cloudsight) with basic authorization. Here is the code I have so far:

var xhr = new XMLHttpRequest();

xhr.open("POST", "http://api.cloudsightapi.com/image_requests", true);
xhr.setRequestHeader("Authorization:", "CloudSight [key]");
xhr.setRequestHeader("Content-Type", "http://previews.123rf.com/images/valzann/valzann1412/valzann141200061/34262193-cigarette-end-on-a-white-background-Stock-Photo.jpg");

xhr.send(null);
console.log(xhr.status);
console.log(xhr.statusText);

When I try to run it, I encounter the following error:

Uncaught SyntaxError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Authorization:' is not a valid HTTP header field name.

If anyone has any insights into what might be wrong with the code, I would greatly appreciate it. I am new to JavaScript and APIs, and any help would be welcome. You can find Cloudsight's documentation here for reference: . I've searched through it but haven't been able to find other examples of Authorization HTTP Header in JavaScript.

javascripthttp-headerscloudsight

Answer №1

To avoid unnecessary characters in the headers, it's best to exclude the colon (`:`) when setting them up. For example, instead of using:

xhr.setRequestHeader("Authorization:", ...

Although the request is successful now, there might be another error that you need to address. It shouldn't pose a significant challenge for you.

Remember, this rule applies not just to the `Authorization` header but to all headers. Hopefully, this guidance helps you overcome your issue.

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

Guide to choosing and unchoosing a div / button using angularJs

I am attempting to create a functionality where items are displayed in a div instead of a list. When an item is clicked, the background color of the div changes and the item is added to a column. Clicking on the item again will revert it back to its origin ...

javascriptjqueryhtmlcssangularjs

When implementing v-model on a v-dialog component, it causes the element within an array to

There is an array of apps with links, and a Dialog component that has v-model="dialog" to close it. However, after adding v-model to the v-dialog, the functionality of the apps is affected. The current app is passed as a prop to Dialog, but it always sends ...

javascriptvue.jsvuetify.js

Having trouble with the express message! I can't seem to access the template I created

I am looking to receive a notification similar to an alert, as described in this link: https://github.com/visionmedia/express-messages By default, I receive something like this https://i.stack.imgur.com/9XlA9.png If I use a template, I do not get any out ...

javascriptnode.jsexpresspug

Utilizing a backup system to store environment variables within a configuration file

Currently, I am utilizing my environment variables by directly referencing process.env.NODE_ENV throughout my application. While this method works, it is becoming challenging to manage and keep track of. Therefore, I would like to consolidate all these var ...

javascriptnode.jsenvironment-variables

React encountered a 400 error when attempting to call a function in node.js

While attempting to call a registration endpoint from a React front-end to a Node.js back-end using Axios, I encountered a 400 error: http://localhost:9000/user/register 400 (Bad Request) Here is my code: /* React component for user registration */ impo ...

javascriptnode.jsreactjsfetchreact-hooks

An error has occurred in the callback function for the watcher "function () { return this._data.$$state }": "Error: [vuex] It is forbidden to modify the vuex store state outside of a mutation"

Here is a screenshot of the error I encountered in the console This is the method that I am using The issue seems to be happening in mounted I have also included MapState in the Computed section While my code is currently functional, I am puzzled by th ...

javascriptvue.jsvuejs2frontend

The jQuery plugin embedded in the Joomla 3.2 module fails to load or function properly

Seeking help with a JavaScript issue on my Joomla website. I'm not an expert, so please bear with me. I am using a regular plugin (not a Joomla specific one) to display my portfolio. It should work like this: ... black.html This is how it shouldn&a ...

javascriptphpjqueryhtmljoomla

Implementing icon display upon click in a Meteor application

Currently, I am in the process of developing an application using meteor and within one of the templates, I have the following code snippet. <h3> <b> <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a> </b> ...

javascriptjqueryhtmlcssmeteor

Can someone provide a list of events for the .on function in Vanilla NodeJS?

Currently experimenting with NodeJS by testing basic backend functionalities like sending various HTTP requests from my index.html file to the server.js file. I plan to delve into Express soon. I've noticed a lack of documentation on NodeJS 'eve ...

javascriptnode.jsnpmeventemitter

How to integrate external JavaScript files with Angular CLI and Webpack

I'm facing a challenge on how to incorporate JS files (vendors) after transitioning Angular Cli from SystemJs to Webpack. For instance Option A I have npm-installed js files. Simply adding script tags to the head tag doesn't work, and it doesn ...

javascriptangularangular-cli

Add data to a size guide

My coding project involved creating a sizing chart using HTML, CSS, and JavaScript. The chart allows users to select their preferred units of measurement (metric or imperial). I used JavaScript to dynamically update the values in the chart based on the sel ...

javascripthtmlcss

Crafting an integrated REST API model with interconnected data

This question revolves around the implementation of a specific scenario rather than a problem I am facing. Let's say we have a User and a Resource, where a User can have multiple Resource but a Resource can have only 1 User. How should API endpoints b ...

javascriptdatabaseapirestexpress

Creating a dynamic JSON structure from an array list of elements: A step-by-step guide

I am faced with the task of transforming an array of employee IDs, listed as follows: empIds: [38670, 38671, 38672, 38673], into a JSON payload structured like this: { "members": [ { "EmployeeId": &quo ...

javascriptarraysjson

The appearance of the logout button may differ depending on the web browser being used

I have implemented a straightforward logout button using the following code: <li><a href="http://localhost:8666/web1/profile/mainpage/logout.php" onclick="return confirm('Are you sure to logout?');">Log Out</a>&l ...

javascriptphpjqueryhtmlcss

What is the best way to fetch a partial JSON response object from an API using JavaScript?

Currently, I am utilizing the One Bus Away API, returning a response object in this format: { "code": 200, "currentTime": 1504150060044, "data": { "entry": { "arrivalsAndDepartures": [ {AnD_item1 ...

javascriptjsonangularjsonpobservable

Using the React context without explicitly setting the contextType or defining a default context

Is it possible to access the closest context from a provider without having to explicitly define contextType in a component by using this.context? Alternatively, is there a way to establish a default context so that when I use this.context, I automaticall ...

javascriptreactjs

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

javascripthtmljquerycssbootstrap-5

To encounter an "undefined" response in the following route of an express application, utilize the next('route') function

const express = require('express') const app = express() app.get('/user/:uid', (req, res, next) => { if (req.params.uid === 'lai9fox') next('route') else next() }, (req, res, next) => { res.send(`<h1& ...

javascriptnode.jsexpress

Changing the background color of a PHP input based on the webpage being viewed - here's how!

I'm in the process of creating a website where each page will have its own unique background color. Additionally, I am using a PHP input for both the header and footer sections, which need to change their background colors based on the specific webpa ...

javascriptphphtmlcssbackground-color

Tips for exchanging JSON data between HTML and PHP using jQuery Ajax?

Hello there! I am just starting to learn PHP and jQuery, and I have been experimenting with some code to understand how things work. However, I seem to be having issues with sending data back and forth between my webpage and the PHP file on the server. Her ...

javascriptphpjqueryajaxjson