When attempting to call a Firebase Cloud Function URL in an AngularJS $http request, an Access Control Origin Error

I recently created a cloud function that involves linking with Plaid. I'm currently working on calling this function using AngularJS's $http method. While the cloud function code is being executed, I encountered an error in my console instead of the expected success response.

This is how my AngularJS $http call looks like:

var token = 'randomGeneratedCode';

$http({
   method: 'GET',
   headers: {
      'Content-Type' : 'application/json'
   },
   url: '<hidden-url>?token='+token
}).then(function successCallback(response) {
    console.log(response);
}, function errorCallback(response) {
    console.log(response);
});

The error message that pops up is:

XMLHttpRequest cannot load <hidden-url>?token=randomGeneratedCode. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.

In case it helps, here is the content of my index.js file for firebase cloud functions:

https://jsfiddle.net/hho25045/

Answer №1

Upon further investigation, I discovered that the issue was related to the server side rather than an angularJs problem. By including a header in your resolution code within index.js, you can eliminate this error and ensure that everything functions correctly.

exports.plaidLinkAccount = functions.https.onRequest((req, res) => {
    res.header("Access-COntrol-Allow-Origin", "*);

    // ...
})

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

Attempting to add text one letter at a time

Hey there! I'm new to JavaScript and Jquery, and I need some help. My goal is to display text letter by letter when a button is clicked using the setTimeout function. However, I seem to be encountering some issues. Any assistance would be greatly appr ...

Firefox displays an error when using jQuery.load(), but Chrome functions properly without any issues

I have created a function that opens a page in a dialog box instead of the main window. The code has been cleaned up and here is the revised version: var baseUrl = window.location.origin + '/static/docs/'; function handleLinkClick(event) { ev ...

How to show line breaks in MySQL text type when rendering in EJS

In my MySQL table, I have a column called PROJ_ABOUT with the type TEXT. I have inserted several rows into this column and now I am trying to display this information in my Express.js app using the ejs engine. <h2>About project</h2> <p> ...

Combining three.js geometry and selecting objects with an octree

I have been utilizing Three.js to showcase a variety of custom geometries in different positions and rotations. These geometries are static and do not change frequently, but users have the ability to manipulate them by adding, deleting, or altering the sha ...

Determine future dates based on selected date and time

When a user selects a date in the datetimepicker, I want to automatically set three additional dates. The first date will be the selected date + 28 days, the second date will be selected date + 56 days, and the third date will be selected date + 84 days. I ...

The Reason Behind Component Non-ReRendering in Redux

I am currently facing an issue with my component and reducer. The `componentDidMount()` method in my component is calling a server to get some data, but the component doesn't re-render after the action is performed. I have checked my code multiple tim ...

Is it possible to remove the active class when clicking on an active link for a second time

While navigating the web, I stumbled upon a question about adding an active link to the currently clicked menu item. The suggested solution was to implement the following code: $("a").click(function(){ $("a").removeClass("active"); $(this).addCla ...

DotJem AngularJS routing: Unable to find the 'pagename' within the '$root' directory

Every time I launch the website, everything seems fine at first, but then all the links turn out to be broken. Although they are clickable and lead to the correct URL, the content related to that specific page doesn't appear. Interestingly, if I copy ...

JQuery, Draggable delete

I created a shopping cart with drag-and-drop functionality for nodes. http://jsfiddle.net/dkonline/Tw46Y/ Currently, once an item is dropped into the bucket (slot), it cannot be removed. I'm looking to add that feature where items can be removed from ...

Accessed a property that is not defined on the instance during rendering

One of the components I'm working on displays data that is defined in the component's state. To access this data, I created a getter: export default createStore({ state: { foo: true, }, getters: { getFoo: state => state.fo ...

Angularjs: Removing unique characters from a string

What is the best way to remove a hyphen from a string in order to just keep the letters? For example, if I have the string "-KTxEMxrAY", how can I eliminate the hyphen and obtain "KTxEMxAY"? I am utilizing AngularJS for this task. ...

Tips on managing Array indexes in AngularJS

Just diving into the world of Angularjs and I have some JSON files containing an array of car objects that I'm displaying on my webpage. My goal is to have a "button" that, when clicked, will alert me with data specific to that particular button. The ...

Experiencing difficulties managing NodeJS session

I've been attempting to integrate a login feature into my nodejs-based web application. const express = require('express'); const app = express(); const route = express.router; const sessions = require("client-sessions"); app.use(sessions ...

What steps should I take to resolve npm start issues within my Node.js application?

Upon completing the npm install, I attempted to run npm start for my project. Unfortunately, an error was displayed. What steps can be taken to resolve this issue?view image of the error here ...

Firebase Integrations: How to Handle Errors in External API Calls within Firebase Functions

My current challenge involves retrieving data from an external API using Firebase functions and displaying it in an Angular application hosted on Firebase. Billing is enabled for the project. The API call works fine on localhost, but fails to fetch data wh ...

What are the steps for converting a structured text document into a SQL table?

I am currently working on a project that involves the need to save and load a structured text document, similar to MS Word, into/from a MySQL table. For instance, if given a sample document like sample.doc, the goal is to save both the content and formatt ...

What is the best way to showcase the reading from a stopwatch on my screen?

Working on these codes has been quite a challenge for me. I have recently embarked on a JavaScript journey as a beginner and attempted to create a stopwatch project. However, it seems like I may have missed the mark with the logic or implementation somewhe ...

Hold off on running the code until the image from the AJAX request is fully loaded and

Currently, I am facing a challenge with my code that aims to determine the width and height of a div only after it has been loaded with an image from an AJAX request. The dimensions of the div remain 0x0 until the image is successfully placed inside it, c ...

Center a span vertically inside a div as the text within the span grows to occupy the entire div

I am facing an issue with a table that has 25 td's. Each td contains specific elements as shown below: <td> <div> <span> text </span> </div> </td> Additionally, there is a script in place that adj ...

Issue on WordPress where JQuery is undefined causing continuous refreshing on IPhone devices

My wordpress website is performing well in most browsers, including some mobile ones. However, when accessed on an IPhone, the homepage keeps refreshing in a continuous loop. Even after emulating an IPhone using Chrome developer tools, the issue persists. ...