"Troubleshooting a glitch encountered while making an invokeAPI call with Azure Mobile

Working on integrating my Angular App with Azure Services as the back end.

Initially, I used the standard $http call:

   $http({
      method: 'POST',
      url: "https://services.example.com/Api/myApi",
      headers : {
        "Content-Type": "application/json",
        "Ocp-Apim-Subscription-Key": "my-key"
      },
      data : post,
      success : function(data,status) {
        console.log(data + "  " + status);
      },
      failure : function(err) {
          console.log(err)
      }

However, I kept receiving a 200 response code along with an error stating "No 'Access-Control-Allow-Origin' header is present on the requested resource". Despite confirming CORS settings were open with the Back End developer, the issue persisted.

Later, I attempted to integrate using https://github.com/TerryMooreII/angular-azure-mobile-service. The integration seemed logical, and the new call appeared as follows:

Azureservice.invokeApi('myApi', {
          method: 'post',
          body: {
             data: 'Cheese'
          },
          headers : {
             'Content-Type' : 'application/json'
          }
      })
      .then(function(response) {
          console.log('Here is my response object');
          console.log(response)
      }, function(err) {
          //console.error('Azure Error: ' + err);
      });

Unfortunately, upon implementing this approach, I encountered the following ambiguous error message: OPTIONS MobileServices.Web-1.1.2.min.js:2

t.DirectAjaxTransport.t.performRequest @ MobileServices.Web-1.1.2.min.js:2t.Platform.t.webRequest @ MobileServices.Web-1.1.2.min.js:2t.MobileServiceClient.MobileServiceClient._request @ MobileServices.Web-1.1.2.min.js:2(anonymous function) @ MobileServices.Web-1.1.2.min.js:2t.Platform.t.async @ MobileServices.Web-1.1.2.min.js:2Promise @ MobileServices.Web-1.1.2.min.js:2t.Platform.t.async @ MobileServices.Web-1.1.2.min.js:2invokeApi @ angular-azure-mobile-service.min.js:1$scope.submit @ form.js:30$a.functionCall @ angular.js:10567(anonymous function) @ angular.js:18627$get.h.$eval @ angular.js:12412$get.h.$apply @ angular.js:12510(anonymous function) @ angular.js:18626n.event.dispatch @ jquery.js:4435n.event.add.r.handle @ jquery.js:4121

This resulted in yet another Access-Control-Allow-Origin header error combined with a 404 response!

Any insights on how to address this?

Answer №1

First issue: Ensuring your angular js code can make cross domain requests requires allowing your angular site in your Azure mobile service settings. Navigate to your mobile services dashboard > configure > app settings > create a setting "MS_CrossDomainOrigins", with the value "". You can allow multiple sites like this "", but verify that your ajax call is actually reaching the Mobile Service by checking for the header "Access-Control-Allow-Origin" in the response. If not, consult with your backend developer or use a browser debugger like Chrome inspector. (Note: The documented method for allowing CORs through webapiconfig may not work as expected, based on my experience.)

Second issue: It is recommended to address the CORs problem first before moving on to other issues.

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

The Vue design is not being reflected as expected

Encountering a peculiar issue where the style in my Vue component is not being compiled and applied alongside the template and script. Here's the code snippet: To achieve an animated slide fade effect on hidden text upon clicking a button, I've ...

Kartik's gridview in yii2 has a unique feature where the floating header in the thead and tbody are

I'm looking to create a table gridview with a floating header, where the tbody and thead are not the same. The image appears after refreshing the page, before the modal is refreshed. After refreshing the modal, this modal is inside pjax and it sets t ...

`Technical challenges with input parameters and validation of forms`

I have a form that contains multiple input fields. To streamline the process, I came up with the idea of creating a directive to group and manage commonly used fields. Here is an example of how my form looks: <form name="aForm"> <input type= ...

Version 2: "In case of an empty input field, the submit button should be

After experimenting with two different codes on my websites, I encountered an issue. The first code looked like this: $(document).ready(function(){ $('.sendButton').attr('disabled', true); $('#message').keyup(function ...

As you choose a radio button option, provide information and calculate the total of your selected items simultaneously

I am currently working on creating a web-based price list for the company I work for. I will share an example of my progress with $scope.model = ''; this link. My goal is to have certain information displayed and calculate sums when a user select ...

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

Using VBA and Selenium to access iframes within HTML with the #document tag

I am currently facing a challenge in accessing the HTML content within two iframes using Selenium Basic in VBA. Due to restrictions on our machines, we are unable to use IE and other tools like Python are not available to us. In the past, I was able to ac ...

When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

Below is the HTML snippet: <textarea cols="5" disabled id="textareRSAKeypair"> @Model["keypair"] </textarea> <a href="#" class="btn btn-primary" id="downloadKeypair">Download Key</a> Here is the jQuery code: <script src="ht ...

Adjusting the view of an OpenLayers3 map to encompass various vector layers

My OpenLayers3 map includes an OSM Tile layer and one or more Vector layers. I have a function that allows me to zoom into a single layer successfully: vector.addEventListener("change", function() { map.getView().fitExtent(vectorSource.getExtent(), ma ...

outputting javascript within php

I'm struggling to extract the data returned by AJAX after a successful call. Instead of just getting the words printed by my JavaScript code, I end up with the entire script that is echoed in the PHP file. What I really need are only the words outputt ...

Angular Material Clock Picker for 24-Hour Time Selection

Struggling to find a time picker component that supports the 24-hour format for my Angular 14 and Material UI application. Can anyone help? ...

Setting up an i18n project in AngularJS

I just embarked on my angularjs journey yesterday with little to no prior knowledge about it. My initial goal is to centralize all the labels for my UI in a file (to facilitate swapping them out for i18n). As far as I know, this can be achieved by importi ...

Retrieve Data from Form Using PHP and Ajax

I currently have a form on my HTML page that looks like this: <form id="submission" action="testresponse.php" method="post"> <input id="URL" name="URL" type="text"> <button name="Submit" type="submit">Subm ...

retrieve information from an array of objects that include promises

Within my react application, I am faced with the task of retrieving email and name data for various user IDs from separate API endpoints. To achieve this, I follow these steps: const promises = ids.map( id => ( {email: axios.get(`blabla/${id}/email ...

What strategies can I use to prevent making multiple API calls inside setInterval when initializing a new connection in a socket?

I am currently working on implementing a socket system where users can request a function with an ID, and after receiving the ID, I send requests to an API every second and emit the response back to the user. Issue: Every time a new user requests the same ...

Tips for Implementing Error Handling in Angular using Sweetalert2

On this code snippet, I have implemented a delete confirmation popup and now I am looking to incorporate error handling in case the data is not deleted successfully. confirmPopUp(){ Swal.fire({ title: 'Are You Sure?', text: 'Deleti ...

Using an Ajax request to fetch and display warning information

Exploring the world of MVC and Ajax, I am attempting to generate an Ajax query that will display one of three messages (High risk, Medium Risk, and No Risk) in a div when an integer is inputted. Here's my JSON method: public JsonResult warningsIOPL ...

Unable to handle JQuery POST to PHP in success function

I am struggling with a jQuery post function that is supposed to call a PHP script in order to retrieve a value from the database. Although I can see in Firebug that the PHP file is being called and returning a 200 OK status, the success function in my JS ...

What is causing the digest loop from this angular filter grouping?

My goal is to showcase a variety of items in batches of N at a time. The reason for chunking the items is because I need them to be laid out in a tabular or gridded format (each group of N items forms a row, with each item being a column). Below is my atte ...

Provide two values and complete the third one

I have a form with three input fields. I want to fill out two of the fields and have the third field automatically filled in. Here is how it should work: - I fill out the first and second fields, and the third field calculates itself - I fill out ...