XMLHttpRequest is unable to load due to the absence of the 'Access-Control-Allow-Origin' header on the requested resource

I am currently working on an Angular application with a .NET Core web API. The initial request is made to a /token service, but I keep encountering a CORS error despite having it enabled. What could be missing in my setup?

:8088/#/home:1 XMLHttpRequest cannot load http://example.com:90/api/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com:8088' is therefore not allowed access.

     public partial class Startup
    {
        // Configuration setup
    }

Within my Angular application, here is a snippet from LoggingService.js:

  angular
        .module('common.services')
        .factory('loginservice', ['$http', 'appSettings', loginservice]);

        // Login service implementation

And here is a part of LoginController.js within the same Angular app:

app.controller('logincontroller', ['$scope', 'loginservice', 'userProfile', '$rootScope', logincontroller]);

// Login controller functionality

More information about token authentication in ASP.NET Core can be found here.

javascriptc#angularjsasp.net-web-apiasp.net-core

Answer №1

When looking at this particular section of the code, it's important to note that the CORS configuration should be set up before passing the app variable into ConfigureAuth as a parameter. In other words, make sure to configure CORS first and then proceed to pass the variable app into ConfigureAuth.

Below is an example from the code:

  public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }
        app.UseCors("SiteCorsPolicy");
        app.UseMvc();

        ConfigureAuth(app);           


    }

Answer №2

When setting up Cors in your application, remember to double-check the policy names for accuracy. In this case, there was a mismatch between "AllowAllHeader" and "AllowAllHeaders".

If you remove the incorrect line, the call to app.UseCors("AllowAllOrigins") should cover all cases as long as you have specified AllowAnyHeader() within the "AllowAllOrigins" policy.

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

Extract a targeted array from a WebResponse request and convert it into a new array

I am trying to retrieve data from an external API that provides responses structured like this: { "meta": { "year": "...", "month": "...", "reasons": "...", "api_data": "..." }, "results": [ { "name": "David", "age": ...

c#.netjsonasp.net-web-api

Determining Cookies with Jquery Function and Directing Attention

In my asp.net website, I have configured the login control to remember the username using cookies. Is there a way to utilize a JQuery (JavaScript) function to check for the presence of cookies and automatically shift focus to the password field? ...

javascriptasp.netjquery

Utilizing dual submit inputs in a single form with Ajax functionality in Django

This question has been asked three times now, but unfortunately there seems to be no expert available to provide an answer. When using the method in view.py without JavaScript code, everything functions perfectly for both saving and calculating in one for ...

javascripthtmldjango

Can you outline the distinctions between React Native and React?

Recently delving into the world of React sparked my curiosity, leading me to wonder about the distinctions between React and React Native. Despite scouring Google for answers, I came up short on finding a comprehensive explanation. Both React and React N ...

javascriptreactjsreact-nativejavascript-framework

Executing a JavaScript function by assigning its name to a variable

So, I have a function called root and then I store the function name in a variable (call). My goal is to call the function using the value of the variable. For example: (Note: We're not using root() directly, but rather using the value stored in the ...

javascriptjqueryangularjs

The jQuery Show Hide feature is experiencing issues specifically on Internet Explorer

Everything looks good in Firefox and Chrome, but unfortunately it's malfunctioning in IE. Does anyone have a suggestion for hiding select Dropdown options? I attempted using CSS with display: none but it didn't work. $j("#id option[value=&apos ...

javascriptjquerycss

Encountering an issue with Material-UI and Next.js: "TypeError: theme.spacing is not a function

Encountering an issue after modifying _app.js to dynamically generate a material UI theme. I've been following the implementation example provided by the material-ui team at: https://github.com/mui-org/material-ui/tree/master/examples/nextjs. To summ ...

javascriptreactjsmaterial-uinext.js

Using the spread operator to pass properties in React

Update: After delving deep into the documentation, @wawka has discovered that there may be some issues with the react-router-dom v^5.0.1 causing problems with the myLink2 component. It seems like a rewrite of this component may be necessary. In my React p ...

javascriptreactjsreact-props

"Trying to upload a PDF file with ajax, but encountering consistent failures with

I've been struggling with this code that just won't work as intended. I'm attempting to send file data and an ID to the php side, but it's failing consistently. I can't figure out what mistake I'm making. Any help would be gre ...

javascriptphphtmlajax

Tips for generating an ecosystem.json file for a node.js express app with pm2 that launches with npm start command

I am looking to utilize pm2 for my node.js express app. Although I can successfully start the server using npm start, I want to set it up in the ecosystem.json file so that I can manage it with pm2 and run it in cluster mode. One thing to note is that I c ...

javascriptnode.jsexpressnpmpm2

How to extract and process the datetime field "$time" from a MongoDB JSON document in a C#/SSIS Script Component

Currently, I am facing a challenge in deserializing a MongoDB's datetime field "$time" from a JSON file within the Script Component in SSIS using C#, all without relying on Newtonsoft. Here is my progress so far. Any assistance would be greatly apprec ...

c#jsonmongodbssisscript-component

Enhanced efficiency in an if...else statement

Is there a more efficient logic for the following if...else condition? Scenario There are three date parameters: DateFrom, DateUntil, and NewDateUntil. If DateFrom <= DateNewUntil And DateUntil > NewDateUntil then add a warning message and ret ...

c#.net

JavaScript- Tabbed Navigation with Lists as the Content

Currently, I am facing a frustrating issue in finding a suitable solution. My website uses tabs that utilize the UL, LI system, similar to most tab systems found in tutorials. The problem arises because the javascript on my site interferes with using the ...

javascriptjqueryhtmlcsstabs

"Transforming data into a defined format: A step-by-step guide

I have some data stored locally that looks like this.. var localData = [["Local", 75], ["STD", 55], ["ISD", 96], ["VOIP", 123], ["INCOMING", 34], ["INET", 104]]; Now I need to retrieve similar data from a database. Here is the data from my database in JS ...

javascriptjqueryjson

The select options appear above the overlay modal

In my HTML application on Apex 5, I have implemented a drop-down list that is not meant to be directly selected by the user. Instead, when the user clicks on it (or when the item receives focus), a modal page opens displaying the list of items for selectio ...

javascripthtmloracle-apex-5.1

Send two field values via axios by utilizing a b-form-select component from the Bootstrap Vue library

I'm struggling to send two fields to my backend, but every time I attempt to do so, both values end up as null in the backend. I am uncertain about what mistake I might be making. <template> <div id="app"> <div> ...

javascriptvue.jsbootstrap-4nuxt.js

Changing the CSS attributes of a DIV element while inside a complexly nested IFRAME

Currently, I am dealing with a business intelligence tool that restricts me to working within a deeply nested iframe in order to add code. My goal is to leverage jQuery and/or JavaScript to adjust the left and position CSS of a div located three iframes ab ...

javascriptjqueryhtmldomiframe

Implementing NgRx state management to track and synchronize array updates

If you have multiple objects to add in ngrx state, how can you ensure they are all captured and kept in sync? For example, what if one user is associated with more than one task? Currently, when all tasks are returned, the store is updated twice. However, ...

javascriptangulartypescriptgoogle-cloud-firestorengrx

Sending an Array from Javascript to Node.js

First off, I want to express my gratitude for attempting to assist me. I am inquiring about how to pass an Array from JavaScript to a Node.js backend for parsing. Below is the Array in question: var Coordinates = [ {lat: 37.772, lng: -122.214}, ...

javascriptarraysnode.jspostget

Designing webpages by superimposing text onto images with customizable positioning

My current project involves developing an HTML document with a floor plan image as the main layer. On top of this image, I need to display employee names extracted from a database and positioned on the map based on a location variable within the database ...

javascripthtmlimage