An Angular application running on an Azure App Service experiences crashes exclusively when accessed through the Chrome browser

My webapi/angular site is hosted on the same Azure app service, with authentication token and other APIs located at /site/api and the angular app at /site/app.

Everything works fine on our staging environment, which is a Windows 2012 VM with IIS 7. The angular website runs smoothly on IE, Firefox, Chrome, and Safari without any issues.

However, when I access my application hosted on Azure in Chrome, it crashes at some places where I have made a $http call. I receive an internal server 500 error but can't find more details. On the same azure website, there are no errors when browsing with IE and Firefox. I've also added the verb OPTION to my web.config, but it doesn't seem to help.

Error seen in chrome: 
{Message: "An error has occurred."}
Message: "An error has occurred."

Thank you.

More log data:

<Event xmlns="http://schemas.microsoft.com/win/2004/08/events/event">
 <System>
  <Provider Name="WWW Server" Guid="{3A2A4E84-4C21-4981-AE10-3FDA0D9B0F83}"/>
  <EventID>0</EventID>
  <Version>1</Version>
  <Level>3</Level>
  <Opcode>16</Opcode>
  <Keywords>0x100</Keywords>
  <TimeCreated SystemTime="2016-06-21T04:25:31.841Z"/>
  <Correlation ActivityID="{00000000-0000-0000-9D0F-0080000000E9}"/>
  <Execution ProcessID="76" ThreadID="5400"/>
  <Computer>RD0003FF853E2D</Computer>
 </System>
 <EventData>
  <Data Name="ContextId">{00000000-0000-0000-9D0F-0080000000E9}</Data>
  <Data Name="ModuleName">__DynamicModule_Microsoft.Owin.Host.SystemWeb.OwinHttpModule, Microsoft.Owin.Host.SystemWeb, Version=3.0.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35_53f2659e-bb7a-4b20-8ef3-c37bb14b89e2</Data>
  <Data Name="Notification">64</Data>
  <Data Name="HttpStatus">500</Data>
  <Data Name="HttpReason">Internal Server Error</Data>
  <Data Name="HttpSubStatus">0</Data>
  <Data Name="ErrorCode">0</Data>
  <Data Name="ConfigExceptionInfo"></Data>
 </EventData>
 <RenderingInfo Culture="en-US">
  <Opcode>MODULE_SET_RESPONSE_ERROR_STATUS</Opcode>
  <Keywords>
   <Keyword>RequestNotifications</Keyword>
  </Keywords>
  <freb:Description Data="Notification">PRE_EXECUTE_REQUEST_HANDLER</freb:Description>
  <freb:Description Data="ErrorCode">The operation completed successfully.
 (0x0)</freb:Description>
 </RenderingInfo>
 <ExtendedTracingInfo xmlns="http://schemas.microsoft.com/win/2004/08/events/trace">
  <EventGuid>{002E91E3-E7AE-44AB-8E07-99230FFA6ADE}</EventGuid>
 </ExtendedTracingInfo>
</Event>

<Event xmlns="http://schemas.microsoft.com/win/2004/08/events/event">
 <System>
  <Provider Name="WWW Server" Guid="{3A2A4E84-4C21-4981-AE10-3FDA0D9B0F83}"/>
  <EventID>0</EventID>
  <Version>1</Version>
  <Level>5</Level>
  <Opcode>49</Opcode>
  <Keywords>0x0</Keywords>
  <TimeCreated SystemTime="2016-06-21T04:25:31.841Z"/>
  <Correlation ActivityID="{00000000-0000-0000-9D0F-0080000000E9}"/>
  <Execution ProcessID="76" ThreadID="5400"/>
  <Computer>RD0003FF853E2D</Computer>
 </System>
 <EventData>
  <Data Name="ContextId">{00000000-0000-0000-9D0F-0080000000E9}</Data>
  <Data Name="Buffer">{&quot;Message&quot;:&quot;An error has occurred.&quot;}</Data>
 </EventData>
 <RenderingInfo Culture="en-US">
  <Opcode>GENERAL_RESPONSE_ENTITY_BUFFER</Opcode>
 </RenderingInfo>
 <ExtendedTracingInfo xmlns="http://schemas.microsoft.com/win/2004/08/events/trace">
  <EventGuid>{D42CF7EF-DE92-473E-8B6C-621EA663113A}</EventGuid>
 </ExtendedTracingInfo>
</Event>

HTTP Error 500.0 - Internal Server Error The page cannot be displayed because an internal server error has occurred.Detailed Error Information: Module __DynamicModule_Microsoft.Owin.Host.SystemWeb.OwinHttpModule, Microsoft.Owin.Host.SystemWeb, Version=3.0.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35_53f2659e-bb7a-4b20-8ef3-c37bb14b89e2 Notification PreExecuteRequestHandler Handler System.Web.Http.WebHost.HttpControllerHandler Error Code   0x00000000 Logon Method Bearer Logon User admin

Answer №1

There was a small issue with the cors setting. Updating the web.config as shown below resolved it.

<add key="webpages:Version" value="2.0.0.0" />
    <add key="CORSOrigins" value="https://domainname.net" />
    <add key="CORSMethods" value="OPTIONS, GET, POST" />
    <add key="Access-Control-Allow-Headers" value="Origin, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control" />

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

Sending Three.js meshes to a web worker through JavaScript

I have a collection of objects, which are meshes generated using Three.js, that I need to perform operations on within a web worker. My question is, how can I send these objects to the worker? My understanding is that there's a concept called transfe ...

What is the process for eliminating the invocation of a function in Jquery?

I am currently facing an issue with my application. When I launch the Ficha() function, it initiates an ajax call and works perfectly fine. However, another ajax call is made later to load HTML tags that also need to invoke the Ficha() function. The prob ...

NodeJS's pending ajax post using SailsJS

I'm experiencing an issue with processing AJAX data in my sailsJS app. The ajax post data always stays in the pending state, here is the code from my view: <script type="text/javascript"> $('#submit').click(function(){ $.ajax ...

Storing user information in Angular after login and implementing JWT authentication

Is it advisable to save any user information other than JWT in local storage or cookies after a successful login? (The user profile object is already saved and encrypted in the JWT payload sub-part.) I need the user profile object ready before initializing ...

React event handling

Currently, I am in the process of developing an accordion app using React. The data for this app is fetched from an API, and while I have the basic structure of the app ready, I am facing some difficulties with handling the click event on the accordion. H ...

Locating the ASP.NET validator's Control with the help of JQUERY or basic Javascript

On my webpage, I have several textboxes with corresponding ASP.NET validators for validation. I know that I can validate all the validators using a JavaScript function: Page_ClientValidate("myvalidators") where "myvalidators" is the group name of my val ...

Employing jQuery to add an element as a sibling rather than a child node

I'm having trouble finding the specific functionality I need. My goal is to add sibling DOM elements to a disconnected node. From what I gather, it should be possible with either .after() or .add(), but for some reason both methods are not working as ...

How can I hover over multiple cells in a table?

Is there a way to change the color of multiple adjacent cells when hovering over one cell, and can this be done dynamically (so the number of adjacent cells that change color can vary)? Here is the code snippet: I'm using React to create a table wit ...

How can you eliminate the first elements of two or more arrays of objects until all of their first elements match based on a specific field?

My Typescript code includes a Map object called `stat_map` defined as const stat_map: Map<string, IMonthlyStat[]> = new Map(); The interface IMonthlyStat is structured as shown below (Note that there are more fields in reality) export interface IMon ...

Automatically include JavaScript and CSS files in your Ionic projects

I am interested in streamlining the process of injecting new js/css files into my ionic project. After coming across an informative article on gulp inject, I learned how to achieve this with my own js/css files stored in specific folders. However, when I ...

The && operator is not executed when the button is disabled

There is a button on the page that has been disabled using the [disabled] property. <button class="btn btn-primary center-block" (click)="sign(sf.value)" [disabled]="validateInsuredFirstName(firstName.value) && validateInsuredLastName(l ...

Fetching data using JSONRequest sample code

I am new to web development and this is my first attempt at using JSON. On the JSON website (http://www.json.org/JSONRequest.html), they recommend using JSONRequest.get for certain tasks. However, I keep running into an error stating "JSONRequest is not ...

Sending an array from the server to the client using Node and Express during page loading?

I am utilizing Node and Express in my project. The application fetches data from a remote database on page load and sends it to a handlebars template server-side. However, I would like this JSON data to also be accessible for client-side interactions. How ...

Is there a way to make the console output more visually appealing with some styling?

What techniques do programs such as npm and firebase use to generate visually appealing and informative console output during command execution? Consider the following examples: $ firebase deploy or $ npm i <some-package> ...

Display an error popup if a server issue occurs

I'm considering implementing an Error modal to be displayed in case of a server error upon submitting a panel. I'm contemplating whether the appropriate approach would be within the catch statement? The basic code snippet I currently have is: u ...

Keep the AngularJS view up-to-date through regular modifications

Is there a way to automatically update the view when changes occur from another computer without refreshing the entire page? I attempted setting an interval to call my API every ten seconds and clear the cache, but this approach requires reloading all da ...

creating an interactive table with the help of the useState hook

I'm new to JavaScipt and ReactJS, so I have a question that may seem obvious but I can't seem to figure it out. I am attempting to display my array in a table using useState, but currently I can only show the header. Additionally, if anyone know ...

Refresh Material-Ui's Selection Options

Is there a way to properly re-render the <option> </option> inside a Material UI select component? My goal is to transfer data from one object array to another using the Material UI select feature. {transferData.map(data => ( <option ...

When using ng-init, the select will not automatically set to a default value

I'm facing an issue with setting the default value for a drop-down using ng-options. Even though I am able to get the default value in the response, it is not getting set in the drop-down. In JavaScript: $scope.personalDetails = [ { ...

Concealing the rear navigation button within the material carousel

I have a material css carousel, and I am trying to hide the back button on the first slide. I attempted to use the code below from a previous post The following code snippet prevents the user from looping through the carousel indefinitely. Stop looping i ...