Issues with reading response headers in AngularJS when using Apiary.IO?

I am attempting to mock my API using Apiary.io, but I am facing an issue where I cannot retrieve any headers from the response object in angularJS. I have verified that at least Content-Type: application/json is correctly set up by checking in firebug. The Angular code should be able to read the headers correctly, as I can print them when sending a request somewhere other than apiary.io...

  $http.get('http://ies.apiary.io/some').then(function(response) {  
    console.log("ok",response.headers('Content-Type'));
    },function(response){console.log("err",response);});

http://plnkr.co/edit/zMO0pXGsIdJkV0fZdBdw

Answer №1

The root of the issue lies in a bug found specifically in the Firefox browser: https://bugzilla.mozilla.org/show_bug.cgi?id=608735

When making CORS requests, Firefox fails to return any data for req.getAllRequestHeaders(), despite req.getRequestHeader('Content-Type') functioning correctly.

To resolve this problem, either Mozilla needs to address the bug, Angular needs to find a workaround similar to what jQuery has done, or users may need to utilize XmlHttpRequest instance directly.


Another potential factor that may be related but is likely not the main cause:


Prior to now, Apiary.io was neglecting to include the Max-Age parameter in its CORS headers. This meant that if you had a basic blueprint, the pre-flight response for CORS could be cached, possibly leading to subsequent requests being denied even after adding more resources to your blueprint.

The Max-Age value has since been set to 10 seconds to correct this issue. However, depending on your browser, the pre-flight cache might still impact you. Consider clearing the cache or testing the application in a different browser.

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

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

Tips for preserving the Context API state when navigating between pages in Next.js

Currently, I am working on a project that involves using nextJs and TypeScript. To manage global states within my application, I have implemented the context API. However, a recurring issue arises each time I navigate between pages - my state re-evaluates ...

What if there was a magical jQuery method that could automatically trigger a callback function? What could it possibly be named?

Is there a way to load only images and iframes, similar to the .load() function? I want to automatically add a selector element into the "this" variable for this purpose. $('document').ready(function({ $('a').<Something to trigg ...

Leverage the Node Short ID library in conjunction with Angular 6 using TypeScript

I attempted to utilize the node module within an Angular 6 typescript environment. Step one: npm i shortid Within my TypeScript class: import { shortid } from 'shortid'; let Uid = shortid.generate(); However, I encountered an error stating ...

Transforming the FormData() format into a jQuery structure

Hey there! I've been doing some research online about uploading files using JavaScript, and I stumbled upon some great resources, including this one https://developer.mozilla.org/en-US/docs/Web/API/FormData. I have a script that uploads an image to th ...

Modify and improve promise and promise.all using the async/await feature of ES2017

I have successfully implemented a photo upload handler, but I am now exploring how to integrate async await into my code. Below is the working version of my code using promises: onChangePhotos = (e) => { e.preventDefault() let files = e.target ...

The chart JS label callback requires a specified type declaration

Currently, I am in the process of updating an old Angular platform to a newer version. One requirement is that everything must have its type declaration. I encountered a problem with the label callback showing this error: The error message reads: "Type &a ...

Implementing Kendo UI dataSource to interact with a PHP function

Greetings Everyone, I have a category.php file within my code that handles CRUD functions. However, I am unsure how to call these functions in the Kendo UI dataSource/transport. Previously, I had separated the PHP files, but now I want to consolidate them ...

There seems to be a contradiction in my code - I am returning a Promise but TypeScript is throwing an error saying that the

I currently have a function that retrieves a bot's inventory on the Frontend fetchBotInventory() { this.socket.emit('fetch bot inv'); this.socket.on('bot inv', (botInventory) => { return new Promise((resolve, re ...

What is the best way to transfer data from a parent component to a child component in ReactJs?

When dealing with nested react elements, how can you pass values from the parent element to a child element that is not directly inside the parent element? React.render( <MainLayout> <IndexDashboard /> </MainLayout>, document.b ...

Sending data to the template

Currently, I am working with NodeJS/Expressjs and have implemented the following route: router.post({ var value = req.body.value; //I NEED TO DO SOMETHING LIKE var file = '../test/test.js'; file.render(value); }); The content of / ...

Listener document.addEventListener (function() {perform the function as shown in the illustration})

Currently facing an issue that I'm struggling to resolve, attempting to execute a code snippet from the ngcordova website without success. While using the plugin $cordovaInAppBrowser.open ({... it generally functions well until the inclusion of the ...

What is the best way to invoke a custom hook that returns a value within the useEffect hook?

I have a unique situation where I am using a custom hook that returns an object based on the parameter it receives. I now need to modify this behavior by recreating the object with updated parameters within the useEffect function. The challenge is that I c ...

Having trouble with krakenjs angularjs $http's delete method not functioning as expected

While using KrakenJs, I came across a workaround to send POST/PUT/DELETE requests without disabling "csrf" by including a "_csrf" parameter in the body In my index.dust file: <input id="csrfid" type="hidden" name="_csrf" value="{_csrf}"> In myScri ...

displaying a pair of inputs next to each other

Is it possible to display two input fields side by side? I am using Angular's matInput forms, but struggling to position the second input next to the first. What I would like to achieve is to have "input1 , input2" on the same line. Here is my code: ...

Efficiently update numerous users simultaneously within Firebase

I am trying to figure out how to update multiple user objects stored in my Firebase 2.x DB simultaneously. Each object is structured similarly to the following example: { "users": { "$id": { "date_of_birth": "June 23, 1912", "full_name": ...

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

Encountering errors like "Cannot find element #app" and "TypeError: Cannot read property 'matched' of undefined" typically happens when using vue-router

Recently, I decided to dive into Vue.js as a way to revamp an existing frontend app that was originally built using Scala Play. My goal is to explore the world of component-based web design and enhance my skills in this area. Initially, everything seemed ...

Issue: Unable to locate module 'js-yaml' while executing npm start command

Unable to locate module 'js-yaml' Require stack: D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\loaders.js D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\createExplore ...

In Angular, the object may be null

click here for image Encountering an error message stating that Object is possibly 'null' when utilizing querySelector and addEventListener in Angular. ...