Troubleshooting the error message "XMLHttpRequest cannot load" when using AngularJS and WebApi

I have developed an asp.net webApi and successfully published it on somee.com. When I access the link xxxx.somee.com/api/xxxx, everything works fine. However, when I try to call it in Angularjs, it does not work.

$http.get('http://xxxxxx.somee.com/api')
.then(function(response) {
    console.log(response);
});

Upon making the call, I encounter the following error:

XMLHttpRequest cannot load xxxx.somee.com/api/xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I am seeking a solution to this issue. Thank you for your assistance.

javascriptangularjsasp.net-web-api

Answer №1

When your Angular site and API site are hosted on different domains or ports, you may encounter this problem. To fix it, you should insert the code below into your webapiconfig.cs file:

 var cors = new EnableCorsAttribute(http(s):// example.com/api/path, "*", "*");
 config.EnableCors(cors);

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

Why isn't this working? I'm attempting to trigger a sound when I hover with my cursor, but it only plays when I click instead

When I click on it, it works fine. But I can't seem to get it to work on hover. Can someone help me out? This is the HTML code: <body> <audio autoplay id="HAT2" > <source src="OOOOO_1_HAT.mp3" > Your browser doesn't support t ...

javascriptjqueryhtmlhover

"Encountered the following error message: "Error [ERR_HTTP_HEADERS_SENT]: Unable to modify headers once they have been sent to the client" while attempting

My attempts to set a cookie when someone inputs the correct key (1234) are resulting in an error message: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client. I'm confused on what steps to take next. I've tried r ...

javascriptexpresssocket.io

What is the best way to find the difference between two time moments using Moment

Hello everyone, I could really use some assistance with Moment.js. I have two input fields, one labeled Start and the other labeled Stop. start = moment().format('LT'); // This works when I click on the play button stop = moment().format(' ...

javascriptmomentjs

Challenging glitch in the JavaScript code

My jQuery code seems to be functioning properly in online text editors like Fiddle and StackOverflow snippets. However, when I try to implement the same code in Brackets or view it on GitHub, the navbar scroll down animation fails to work as expected. You ...

javascripthtmlcss

I just obtained the height measurement of a dynamic table - now I must transfer this height value to a different element

Recently, I encountered a situation where I needed to get the height of a dynamic table using code like this: var table = document.getElementById("test"); document.write(table.offsetHeight); However, the challenge arose when I realized that I also needed ...

javascripthtmlcss

How can I display the updated save button text in an Angular form?

Using an Angular 1 form to display a changed save button text can be achieved with the following settings: (disabled) save - displayed when the form is initial (enable) save - displayed when the form is edited or re-edited after being saved (enable) save ...

angularjsangularjs-forms

What is the best way to incorporate external HTML content while ensuring HTML5 compatibility? Exploring the different approaches of using PHP, HTML

While this may seem like a simple task to the experts out there, I have been struggling for over an hour without success... My objective is to use a single footer file and menu file for all my webpages while considering blocking, speed, and other factors. ...

phpjavascriptperformancehtml

Having trouble with submitting the second stage of a multi-step form through Ajax technology

I'm currently tackling a multi-step form project using JavaScript, specifically focusing on submitting the second step of the form via Ajax. I've taken the initiative to create a distinct JavaScript file titled ajaxRequest.js to manage the Ajax r ...

javascriptphpjqueryajaxlaravel

I am having trouble with my jQuery login function not properly connecting to the PHP file

Hey there, I've been working on creating a login system from scratch by following an online tutorial. The initial Javascript is functioning properly as it detects errors when the inputs are empty. However, once I enter text into the input fields and c ...

phpjavascriptjqueryajaxauthentication

Determine the time left and check the speed of file uploads using ajax with jquery or javascript

Here is a snippet of code using jQuery.ajax to handle file uploads with progress tracking functionality. The function updates the DOM elements with information about bytes uploaded, total bytes, and percentage completed. However, I am looking for addition ...

javascriptjqueryajax

When using Magento, pasting the same link into the browser produces a different outcome than clicking on window.location - specifically when trying to add items to the

I'm in the process of setting up a Magento category page that allows users to add configurable products directly from the category page, which is not the standard operation for Magento. After putting in a lot of effort, I have almost completed the ta ...

javascriptmagentomagento-1.7

Tips for comparing props in the ComponentDidUpdate method when dealing with a complex data structure that is connected to Redux

I have been experimenting with the new lifecycles of React v16. It works perfectly fine when comparing single keys. However, when dealing with large data structures like Arrays of objects, performing deep comparison can be quite expensive. My specific sce ...

javascriptreactjsredux

Sending information from one ajax request to anotherORTransferring

Apologies for not including code in this post as I am currently working on a project in a car without internet access. Thankfully, I am using the amazing Stack Exchange app. Currently, I am facing a challenge where I need to work with two separate API cal ...

javascriptjqueryajaxapi

Having trouble with Visual Studio 2015 not compiling TypeScript within an ASP.NET Core project?

Seeking assistance with my Angular app development setup in VS2015. Even though it is recognized as a TypeScript Virtual Project, I am facing issues getting the transpiled files into the wwwroot folder within my ASP.NET Core project. Here's an overvie ...

angularjsvisual-studiotypescriptnpmvisual-studio-2015

Display the translated text to the user while storing a different value in the database using AngularJS and Angular-Translate

Currently utilizing AngularJS and attempting to utilize $translate for translations. I am facing an issue with a dropdown list where I display translated options for the user. For instance, in English = "Red" and in French = "Rouge", etc. The problem ar ...

angularjsangular-translate

Having trouble embedding Hangouts button in HTML template using script tags

When I include a Hangouts button on my index page, it is visible and functional as expected: <body ng-app="sampleApp" ng-controller="MainCtrl"> <div class="row"> <div class="col-md-12 m-body"> <div class="m ...

javascripthtmlangularjsgoogle-hangouts

Adding dynamic text to a <span> tag within a <p> element is causing a disruption in my layout

I'm encountering an issue with a Dialog box that displays a message to the user regarding file deletion. Here's how it looks: +-----------------------------------------------------------------------+ | Delete File? ...

javascripthtmlcss

Moving from $.ajax to $http in AngularJS can improve the performance and efficiency of your

For the purpose of testing (to utilize $httpBackend), I am looking to switch my Service from using jQuery $.ajax to Angular's $http. This is how my current service is structured: app.service('myService', function() { return { getUse ...

angularjsunit-testingjasmine

What is the best way to create a test for my Vue component using Jest?

Below is the login form component that needs to be tested for various scenarios: Verify successful login with both username and password filled Check for input error when either username or password is left blank Ensure input error is thrown when only us ...

javascriptvue.jsnpmjestjs

Issue encountered while designing a 3-column card grid with Bulma and Nextjs while fetching data

Trying to implement a 3 Column Card Grid using Bulma in Nextjs with data fetched from a JSON Endpoint. The data retrieval is successful and working perfectly, but struggling to identify the issue. Is there a way to limit the columns? In Bootstrap, used C ...

javascriptreactjsnext.js