Failed to retrieve information using a custom header in the HTTP request

My AngularJS code works well without the header option.

$http.get(env.apiURL()+'/banks', {
    headers: {
        'Authorization': 'Bearer '+localStorageService.get('access_token')
    }
})

Here is the request:

OPTIONS /banks HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:8081
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.146 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: http://localhost:8081/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,vi;q=0.6

The response is as follows:

HTTP/1.1 404 Not Found
Access-Control-Allow-Headers: Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: http://localhost:8081
Content-Type: text/plain; charset=utf-8
Date: Mon, 17 Mar 2014 11:05:20 GMT
Content-Length: 19

I've included both Accept and Authorization headers but the request still fails.
Could the discrepancy in capitalization between authorization and Authorization be causing this issue? If so, how can I prevent AngularJS from doing that?

if origin := req.Header.Get("Origin"); origin == "http://localhost:8081" {
    rw.Header().Set("Access-Control-Allow-Origin", origin)
    rw.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
    rw.Header().Set("Access-Control-Allow-Headers",
        "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
}

Here's the Go server routing code:

r := mux.NewRouter()
r.HandleFunc("/banks", RetrieveAllBank).Methods("GET")

http.ListenAndServe(":8080", r)

Answer №1

Alright, the issue arose because I forgot to handle the "OPTIONS" request (for CORS purposes, browsers will send a preflight OPTIONS request first before sending the actual request if accepted by the server).
The necessary modification is only required in my Go server (refer to the comment):

func main() {
    r := mux.NewRouter()
    r.HandleFunc("/banks", RetrieveAllBank).Methods("GET")
    http.ListenAndServe(":8080", &MyServer{r})
}

type MyServer struct {
    r *mux.Router
}

func (s *IMoneyServer) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
    if origin := req.Header.Get("Origin"); origin == "http://localhost:8081" {
        rw.Header().Set("Access-Control-Allow-Origin", origin)
        rw.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
        rw.Header().Set("Access-Control-Allow-Headers",
            "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
    }
    // If it's an options request, halt execution
    if req.Method == "OPTIONS" {
        return
    }
    // Let Gorilla do its thing
    s.r.ServeHTTP(rw, req)
}

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

Is it possible in MongoDB to embed a collection within a document of another collection?

Working with Javascript, Node.js, Express, and MongoDB for a web application. Users can create an account with fields for name and last name, but I also need to track completed steps using a boolean value (false for uncompleted, true for completed). Instea ...

Utilizing Objects as Properties in Phaser.Scene in Phaser 3

I've just started working with Phaser using TypeScript and I'm facing an issue. I attempted to move my main objects out of the create and preload methods by loading them as Phaser.Scene class properties. However, after making this change, my game ...

How can I specify the array's length when using JSON.stringify in AngularJS?

I am looking to store form values in JSON to send via $http.post. One of the values, rooms, should be an array with a length determined by the selected value from md-select. The value of Adult should be included within each room entry. var data = { rooms: ...

Angular variable resets to initial value after modification

Currently, I am utilizing ui-router to handle the state management for the admin segment of a project. The admin area includes the ability to browse through various categories. In this category management module, I am working on implementing a breadcrumb l ...

Exploring the world of promise testing with Jasmine Node for Javascript

I am exploring promises testing with jasmine node. Despite my test running, it indicates that there are no assertions. I have included my code below - can anyone spot the issue? The 'then' part of the code is functioning correctly, as evidenced b ...

Refresh the DATATABLE inside an AJAX call without reloading the entire page

I'm currently working with a table that utilizes the Datatable plugin. I have successfully implemented filtering and deletion functionality within the table. However, after deleting certain entries, I noticed an issue where the deleted item still app ...

When incorporating sequelize's belongsTo and hasOne methods, you may encounter an issue where the call stack size surpass

Within my Discussion entity, I have: Discussion.hasOne(sequelize.import('./sound'), { relations: false }) While in the Sound entity, the relationship is defined as: Sound.belongsTo(sequelize.import('./discussion')) To load t ...

Create a canvas element to display an image within a picture frame

I am currently developing a customized framing website and aiming to showcase a frame example on the screen as customers input their dimensions. Progress has been made, but I am facing a challenge in cropping the image's corners using an HTML Canvas e ...

How can I incorporate fetch into my code using VSCode?

I am completely new to using JS. I want to incorporate fetch in VSCode, but I'm having trouble importing it. When I try: import fetch from "node-fetch"; I get this error: (node:19856) Warning: To load an ES module, set "type": &q ...

How can function expressions result in a returned value?

Function expressions result in a value, unlike function declarations which do not. This distinction was clarified for me by others in a different SO thread (link provided). All functions default to returning undefined, hence the emphasis on "expression" ...

The jQuery "after" function appears to be malfunctioning when used with tables

Looking for help with jQuery to add a div around a table after using a table plugin. I've tried using before/after functions but it's not working as expected. Check out the code here: http://jsfiddle.net/LWXQK/1/ Jquery code: $('#dashboard ...

Navigating through nested JSON objects in React to display data effectively

I have been struggling for hours to find a solution to this problem with no success. I really need your assistance. The task at hand involves looping through a JSON file and creating a user interface that consists of multiple columns, each containing vari ...

How can I pass the data-attribute ID from JavaScript to PHP on the same index page using ajax?

I am struggling with the title for this section. Please feel free to modify it as needed. Introduction: I have been working on setting up a datatables.net library server-side table using JSON and PHP. Most of the work is done, but I am facing challenges w ...

Do not reveal result of coin flip using Javascript and API

Even though I meticulously copied my professor's parsing process, the display isn't turning out as expected. It seems like something is off in my code. <div class="main"> <p>Heads or tails? click to toss the coin</p> & ...

Is your jquery keydown event detector failing to recognize key inputs?

Lately, I've been working on a new project and encountered an issue with a piece of code that used to work perfectly fine in a previous project. The code in question is $(document).keydown(function(keypressed){});, which I used to detect specific key ...

Error message: WebTorrent encountered an issue and was unable to pipe to multiple destinations at once

Upon attempting to stream video from a provided torrent file, I encountered some unexpected issues. The example was taken from the official site, so one would naturally assume it should work seamlessly. To troubleshoot, I tried setting up a default site u ...

Serialization of decimal numbers to JSON format for a Web API

I'm having an issue with retrieving JSON data that includes a float value of 10.0. Using AngularJS var replenishAccount = { ReloadThresholdAmount: parseFloat(vm.account.ReloadThresholdAmount), ReloadAmount: parseFloat(vm.account.ReloadAmount) }; va ...

Utilizing Vue.js for Tabs in Laravel 5.8

I am encountering an issue in Laravel while attempting to set up a Vue instance for tabs. Currently, only Tab 1 and Tab 2 are displayed without any content, and the tabs themselves are not clickable links. Could this problem be related to how I am calling ...

Ways to retrieve the posts list along with their corresponding tags using the fewest queries possible

Here is how my database tables are structured: TAGS (more of a category): id, tag name, description, slug POSTS: id, title, url ... POSTSTAGS: id, idPost, idTag USERS: id, username, userSlug... VOTES: id, idPost, idUser Each post can have up to five ...

Hiding timestamps on an interactive transcript: A step-by-step guide

I am in the process of creating personalized interactive ebooks based on a similar website found here: This website utilizes a VTT file along with an audio file. Although the JavaScript code requires time stamps, I would like to hide them for better read ...