Angular 2: Transformation of custom header names to lowercase

Angular 2 rc.6 implemented in typescript 2

I've developed a custom wrapper for the Http service to add specific headers. In the snippet below, options represents the RequestOptions object passed to Http.get():

//if content type is not specified, default to application/json
if(!options.headers.has("Content-Type")){
    options.headers.append("Content-Type", "application/json")
}

//include X-CUSTOM-HEADER header
if(!options.headers.has("X-CUSTOM-HEADER")){
    options.headers.append("X-CUSTOM-HEADER", "value");
}

Upon making a request from my application, the network log in the browser (Firefox 48) displays:

Content-Type: "application/json"

x-custom-header: "value"

Can anyone explain why the second header's name is being converted to lowercase?

PS: Thank you for the responses. Is it just me or does this inconsistency bother anyone else? Why would Angular lowercase some headers while leaving others as they are???

angulartypescripthttp-headers

Answer №1

From what I recall, the issue of case sensitivity in headers was resolved recently by changing them all to lowercase. The specifications dictate that headers should not be sensitive to case, so it should not have any impact either way.

Answer №3

GuntherZochbaer and igorzg have highlighted the specification's requirement for HTTP header names to be case insensitive. Therefore, if my application depends on a specific casing, it is advisable to modify the application rather than trying to navigate around Angular's constraints.

The issue I encountered was that my server anticipated headers to maintain the same casing as previously set. You can refer to this discussion on Github.

To address this problem from the server-side, I devised custom getters to retrieve the requested header regardless of its casing. Instead of directly accessing the headers, I utilize these getters.

PHP

/**
 * Returns the value of a requested header in a case-insensitive manner. Returns NULL if the header is not found.
 */
function fetchHeader($headerName){
    
    // An associative array containing the HTTP request headers
    $headers = apache_request_headers();
    if($headers === false) return null;
    
    // Convert all array keys to lowercase
    $headers = array_change_key_case($headers, CASE_LOWER);
    
    $headerName = strtolower($headerName);
    
    return isset($headers[$headerName]) ? $headers[$headerName] : null;
}

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

Alias route for `src` in Ionic 3

I have set up a custom webpack configuration for Ionic 3 in order to use src as a path alias (meaning I can import from src/module/file): resolve: { alias: { 'src': path.resolve('./src') } } However, after updating to Ionic ap ...

angulartypescriptionic-frameworkwebpack

Tips for accurately inputting a Record key in typescript

Within my code, I have a function that filters the properties of an object based on a specified filtering function: function filterProps<K extends string, V>(object: Record<K, V>, fn: (key:K, value: V, object: Record<K, V>) => unknown) ...

typescript

Which Angular2 npm packages should I be installing?

When I'm trying to create an empty app without using angular-cli, it's really difficult for me to figure out which packages or libraries to include. Searching for angular2 on npmjs yields unwanted results, forcing me to click through multiple li ...

javascriptangularjsangularnpm

Tips for passing a query parameter in a POST request using React.js

I am new to working with ReactJS and I have a question about passing boolean values in the URL as query parameters. Specifically, how can I include a boolean value like in a POST API call? The endpoint for the post call is API_SAMPLE: "/sample", Here is ...

javascriptreactjstypescript

Transforming XML API data into JSON format using Angular framework

Currently, I am utilizing a service to connect to an API that returns data in XML format instead of JSON. The service looks like this: import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/ ...

jsonxmlangular

What is the best way to get my Discord bot to respond in "Embed" format using TypeScript?

I've been attempting to create a bot that responds with an embedded message when mentioned, but I'm running into some issues. Whenever I run this code snippet, it throws an error in my terminal and doesn't seem to do anything: client.on(&apo ...

node.jstypescriptdiscorddiscord.js

Unraveling the Mystery of Reading AnonymousSubject in Angular 2

Currently, I am debugging my ng2 application using console logs. When logging an array, it shows an AnonymousSubject with the following attributes: AnonymousSubject _isScalar:false closed:false destination:AnonymousSubject hasError:false isStopped:false o ...

angulardebuggingtypescriptrethinkdb

Rendering an Angular page with data using Node.js

I have a scenario for my website where users need to input a URL with a parameter (an ID) and receive back the corresponding page containing information from the database. I am using Angular4 but I am unsure of how to achieve this. It's straightforwa ...

javascriptnode.jsangularurl-routing

Endless polling using Angular 4 and Http observables

I am currently developing an infinite polling feature in my Http service for a dashboard that receives survey data from a server. The code I have written below is almost functional (I can see the Json data coming in the console, but it is not reflecting ...

javascriptangularlong-pollingrxjs5angular-http

Unable to find solutions for all parameters of the TemlComponent: (?). encountering a syntax error (compiler.js:1016)

As a beginner in Angular, I'm struggling to pinpoint the error in my code and understand why I'm encountering this issue. The error message reads: "Can't resolve all parameters for TemlComponent: (?). at syntaxError (compiler.js:1016)." To ...

angulartypescriptangular-components

What is the correct way to define types for higher-order class components in TypeScript?

I have developed a utility function that currently has an unused options parameter, and it returns a higher-order component wrapping function. How can I effectively define types on the component so that users of the wrapped component can visualize the typ ...

reactjstypescript

Choose the type of function declaration over a function expression

I am interested in specifying the type for a function declaration, as shown below: function foo(){ } However, I have been struggling with how to achieve this. Instead, I have resorted to converting the function declaration into an expression like this: ...

node.jstypescripttypescript2.0

Typedi's constructor injection does not produce any defined output

I am utilizing typedi in a Node (express) project and I have encountered an issue related to injection within my service class. It seems that property injection works fine, but constructor injection does not. Here is an example where property injection wo ...

javascriptnode.jstypescriptexpressdependency-injection

Save the entire compiler output as a text or CSV file by using the "strict":true compiler option in TypeScript

The tsconfig.json file in my Visual Studio project includes the following settings: { "CompileOnSave":false, "CompilerOptions":{ "strict": true, "skipLibCheck":true }, "angularCompilerOptions":{ "fullT ...

typescriptvisual-studiocompiler-constructionstrict

Is there a way to modify the button exclusively within the div where it was pressed?

I plan to incorporate three buttons in my project (Download, Edit, and Upload). Upon clicking the Download button, a function is triggered, changing the button to Edit. Clicking the Edit button will then change it to Upload, and finally, clicking the Uplo ...

angulartypescript

The TypeScript compiler is attempting to fetch node modules in the browser while compiling a single output file

After setting up my tsconfig file to build a frontend typescript application with a single output structure, I encountered an unexpected issue: { "compilerOptions": { "target": "es5", "module": "system", "lib": [ "e ...

typescripttsconfig

Slim 4 with Angular 10: Issues with downloading PDF files through API, as Angular blob response is coming back empty

Struggling to integrate the download PDF Angular API with Slim 4 API. The response from Slim can be seen in the browser network, but when trying to parse it in Angular, it comes back empty. All the necessary headers have been added on both Angular and Slim ...

phpangularblobslim-4pdfdocument

Troubleshooting change detection problem in Ionic 3 application

There seems to be an issue with the data not being reflected in the view despite changes in the service and component. Various solutions were attempted to address this issue, but none have proven successful: Utilized the ngDoCheck lifecycle hook Imp ...

angularionic-frameworkionic3

What is the best way to establish a model using a date index?

I'm trying to access an API using Angular that returns an array with dates as indexes. After attempting to create a model, I encountered some issues. How should I modify it? This is what the API response looks like: { "Information": { " ...

jsonangulartypescriptapi

Sending print jobs to an HTTP printer from an HTTPS connection using Angular 6

Currently, I have an Angular 6 application set up with Nginx and HTTPS. However, I am facing an issue when trying to send commands to my ZPL printer for label printing. The problem lies in the fact that the printer only accepts HTTP protocol, but the brows ...

angularzpl