Cross-origin resource sharing problem encountered in Firefox and Internet Explorer, while functioning properly in Chrome

I am encountering CORS errors in Firefox and IE, but everything is functioning properly in Chrome.

The two requests causing the issue are

  1. A general call to Facebook which works in Chrome and Firefox, but fails in IE 11. I am making a request to verify the validity of the token by calling . In IE, I am encountering this error: XMLHttpRequest for required Cross Origin Resource Sharing (CORS).
  2. The second request is to my server which has CORS enabled everywhere (code provided below). The strange thing is that both requests are on localhost so they should be on the same server. The error message I am getting is "The Same Origin Policy disallows reading the remote resource at https://localhost:44300/api/auth/login. This can be fixed by moving the resource to the same domain or enabling CORS."

CORS related Web API code

        var cors = new EnableCorsAttribute("*","*","*");
        config.EnableCors(cors);
        app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

Update 1

Interestingly, it functions when deployed to Azure, but not on localhost. Both these issues are resolved once deployed. It's quite perplexing as I need to test locally. Nonetheless, it provides some insights into solving the issue.

Update 2

Consistently working when deployed (even though the client and server are on different domains) and failing on localhost. I have not been able to pinpoint why it fails locally. Despite clearing cache and deleting local files, the issue persists. Even after completely opening up my server to CORS, the problem remains. My only assumption is how Azure handles cross-Azure requests, potentially bypassing the CORS issue during deployment. Nevertheless, I must figure out a way to make it work locally for testing purposes.

Answer №1

Give this a shot. It might resolve the issue.

1) Launch the NuGet Package Manager Console within your web API project.

2) Enter the command Install-Package Microsoft.AspNet.WebApi.Cors and execute it to install the package.

3) Once installation is complete, type Update-Package Microsoft.AspNet.WebApi and proceed with the installation process.

4) Review your web.config file for the specified entries. If present, consider removing or commenting them out:

    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

5) Navigate to your controller file and import the namespace using System.Web.Http.Cors;

6) Within the controller, add [EnableCors(origins: "", headers: "", methods: "*")] to authorize all origins, headers, and methods for access by the controller.

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

Utilizing HTML5 canvas to extract pixel data from an image loaded from an external source

When it comes to security reasons, doing it directly may not be feasible. Nevertheless, there are rumors circulating about certain image-hosting platforms that permit the use of their images in a comparable way (could Google Picasa be one?). I might be mis ...

Is there a way to replicate input data from one website onto a totally separate platform?

I am currently working on a hotel website using the user-friendly WYSIWYG site builder, Wix (yes, I know, don't judge). Like all hotel websites, we need a form for customers to enter their details for reservations and other purposes. However, there&a ...

What causes the axios Library to fail in initiating a request if the API call does not begin with "https://"?

This issue has been resolved, but I still want to ask it in order to gain a better understanding of the underlying processes. So, I am using an API to retrieve data on the current weather in a specific city. The API call (as per the provider's documen ...

What are the best practices for managing live notifications with WebSocket technology?

I have developed a real-time chat application in React.js with Socket.io, but I want to implement a new feature. Currently, User A and User B can only communicate if they both have the chat open. I would like to notify User B with a popup/notification wh ...

Smooth carousel navigating through dots

I am currently using the slick carousel from http://kenwheeler.github.io/slick, and I am looking for a way to limit the number of dots to 8 even when there are more than 8 slides. The navigation dots should include arrows on the left and right sides to in ...

Creating an application with the Ionic Framework minus the use of Ionic.js

Exploring the idea of developing a mobile app for both iOS and Android utilizing Angular Material. Previously experienced with Ionic, I appreciated its convenient development tools like Crosswalk integration and preview server. Can we leverage these tools ...

Purging data when no input is detected in React.js

I need to figure out a reliable way to detect when my input field has been cleared so that I can clear the associated data. Currently, I am using the logic if (searchTerm.length === 0) to check for a cleared input. However, I have also experimented with i ...

Customizing CSS according to specific URLs

I have two different domains - one ending with .nl and the other ending with .be. For instance, domain.nl and domain.be. Both domains share a similar overall style, but I want certain elements to have distinct styling depending on whether it is the .nl o ...

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

I'm completely new to AngularJS and I've encountered an issue. Yesterday, I ran a very simple AngularJS application that I downloaded from a tutorial and it worked perfectly. The application consists of 2 files: 1) index.htm: <!DOCTYPE htm ...

Encountered a TypeError during back button press on Angular UI-Router: "a.indexOf is not a

Currently, I'm developing a web application using Angular 1.6.1 with Angular Material and ui-router modules integrated. Transitioning from one state to another works seamlessly, however, an issue arises when the browser's back button is clicked ...

Angular 11 along with RxJS does not support the combineLatest method in the specified type

Hey there, I'm currently working on utilizing the combineLatest operator to merge two streams in Angular, but I keep encountering an error message stating that "combineLatest does not exist on type". I've attempted to move the code into a .pipe() ...

The custom tooltips feature in Google linecharts will function properly only when the focus target is set to category

I am currently using PHP, MongoDB, and JavaScript to develop my Google Charts Line charts. In PHP, I have designated one column as the tooltip role, positioned as the last but one column. The default tooltip displays the X-axis (Date) and Y-axis (Value), b ...

"Utilizing ng-select with ng-model: A Step-by-Step Guide

Currently, I am working on a code that involves using ng-repeat to loop through options. My goal is to utilize ng-select to choose a value based on a specific condition. However, according to the AngularJS documentation: ngSelected does not interact wit ...

Sending data from a Node.js backend to a React.js frontend using res.send

How can I pass a string from my nodejs backend using res.send? app.post("/user", (req,res) => { console.log(req.body.email); res.send('haha'); }); I need to perform certain operations on the front end based on the value of the string retriev ...

Utilize React to showcase all stored items in localStorage in a Material UI List

I have a storage system with multiple items stored in it. I am looking to retrieve all of them and showcase them using a <ListItem> from Material UI. This is my current code snippet: function saveItem(key, value) { localStorage.setItem(key, value) ...

Transforming Vba Excel code from Internet Explorer to Selenium framework

My VBA code was functioning properly until today. However, I am encountering an issue where Internet Explorer is not opening the URL correctly, possibly due to its outdated nature. Sub QUERYFUT() On Error Resume Next 'query web future Sheets("Fog ...

Encoding a JavaScript object literal with URL encoding

My question involves a Model public class SomeModel { public string SomeText { get; set; } } When working with JavaScript, I create a JavaScript object literal of the model: var model = { SomeText: "test" }; var serializ ...

If $urlRouterProvider.otherwise is used, $stateProvider will not handle the routing

Previously, when "/" was set as "/main", the code was able to load both main and dashboard using $urlRouterProvider.otherwise("/main/dashboard"); However, after changing it to just "/", the dashboard does not load anymore. This change was made due to an i ...

The display of 'App' seems to be experiencing issues within the render method

Can someone help me with this issue? I am encountering the following error: Uncaught Error: Invariant Violation: Element type is invalid - expected a string for built-in components or a class/function for composite components, but received an object. Bel ...

Deciphering the JavaScript code excerpt

This information was sourced from (function ($, undefined) { // more code ... $.getJSON("https://api.github.com/orgs/twitter/members?callback=?", function (result) { var members = result.data; $(function () { $("#num- ...