Edge fails to access Webservice from file:/// host

When attempting to access a webservice that I've created in C# using Typescript and the fetch-api, everything works smoothly in Chrome and Firefox. However, in Edge, the access fails. I've tried both POST and GET methods in Edge, but neither are successful.

It's important to note that the Typescript/js/html is being run locally from disk! So, my Browser address field appears like this: file:///C:/Users/.../WebServiceConsumer/view/index.html

The Typescript method used to access the webservice is as follows:

getData(url:string, token?:string): Promise<any>{

    let headers:Headers = new Headers({"Content-Type": "application/json"});
    if (token) {
        headers.set("Authorization", 'Bearer '+ token);
    }

    return fetch(url, {
        method: "GET", 
        mode: "cors", 
        cache: "no-cache", 
        credentials: "same-origin", 
        headers: headers,
        redirect: "follow", 
        referrer: "no-referrer", 
    })
    .then(response => response.json()
    .then(json => {return json}))
    .catch(error => console.log('error:', error));;
}

The webservice method being accessed looks like this:

public class SearchController : ApiController
{
    [HttpGet]
    [Route("api/v1/Search/Test")]
    public IHttpActionResult Get()
    {
        return Ok("OK");
    }
}

I have set the CORS Policy in my C# code using:

res.Headers.Set("Access-Control-Allow-Origin", "*");

The error message I receive and log to the console is shown here.

I am unsure of how to resolve this issue. What is Edge doing differently from Chrome? How can I access my webservice from Edge?

Just to let you know

  1. The webservice is a C# standalone app with Owin
  2. Accessing from "file:///..." is a requirement for this project

Answer №1

There is a potential scenario where localhost and file:/// URLs are assigned to different security zones, such as internet and intranet. This can result in cross-origin request blocking.

Another factor to consider in Edge browser is that pages categorized in different security zones may have varying levels of security policies applied.

If you have tested locally on a different browser, consider conducting cross-browser testing on a hosted test instance to mimic real-world behavior.

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

Learn how to programmatically edit a label within a newly created child node of a tree view using C# in .NET

I've recently started using a tree view feature. My goal is to create a browse folder form that displays subfolders in a tree view when a user clicks on a folder. I want to be able to add a new folder inside a selected node. Here is an example: Home ...

A guide on efficiently utilizing combineLatest and mergeMap for handling multiple subscriptions

As I continue to delve into the world of rxjs, I've encountered an issue with managing multiple subscriptions. Specifically, I'm struggling to extract an ID from a response in order to correctly associate photos with products. create(product) { ...

Steps to convert GetStringAsync Result into translated text

I have developed a reliable method for translating text using the Google API. Here is the code snippet; public string TranslateText(string input, string sourceLanguage, string targetLanguage) { string sourceCulture = LanguageCultureGenerator.GenerateCu ...

Guide to Setting Up "Remember Me" Login for Users in Angular

I am having trouble setting the 'Remember Me' option on my Login page. I tried using localstorage session but it seems like something is missing in the service file that's causing it not to respond properly. I attempted to follow a guide on ...

Troubleshooting AJAX Problems in ASP.NET and C#

I am currently working on implementing a WebMethod call in my C# code behind using AJAX. I have a Bootstrap Modal that should be displayed when a linkbutton is clicked, triggering the execution of the WebMethod through AJAX to populate a table in the modal ...

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

Attempting to utilize a namespace-style import for calling or constructing purposes will result in a runtime failure

Using TypeScript 2.7.2 and VSCode version 1.21 with @types/express, I encountered an issue where in certain cases VSCode would report errors like: A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Interestingly ...

Understanding the process of reading cookies on the Angular2 side that have been set by the C# server

I'm struggling to understand how the angular code can access the cookie that was set on the server side. I found the following code snippet on GitHub. This C# function sets the cookie in the Response object with the last line of code. My question is, ...

Applying a setvalidator to a FormControl doesn't automatically mark the form as invalid

HTML code <div> <label for="" >No additional information flag:</label> <rca-checkbox formControlName="noAdditionalInfoCheckbox" (checkboxChecked)="onCheckboxChecked($event)"></rca-chec ...

Drizzle-ORM provides the count of items in a findMany query result

Hello there, I'm currently experimenting with the Drizzle ORM and imagine I have this specific query const members = await trx.query.memberTable.findMany({ with: { comments:true } }) I'm wondering how I can retrieve the total count of me ...

I'm looking for a way to create a Redux thunk action creator that will return a promise. How

In my code, I have a primary thunk that is triggered by a button click. Within this thunk, I need to invoke another thunk and ensure it completes before proceeding. The second thunk returns a promise. Below is an excerpt of the code in question: export f ...

Can someone explain the inner workings of the Typescript property decorator?

I was recently exploring Typescript property decorators, and I encountered some unexpected behavior in the following code: function dec(hasRole: boolean) { return function (target: any, propertyName: string) { let val = target[propertyName]; ...

What is the prescribed interface or datatype for symbol type in TypeScript with JavaScript?

I have a set of symbol values in JavaScript that I want to convert to TypeScript. // Defining object values in JavaScript const size = { Large: Symbol('large'), Medium: Symbol('medium') } What is the most efficient method to conv ...

Conceal a specific segment on the web page if the API call in Angular does not return any data

I'm currently working with data retrieved through an API call and I need assistance in implementing code to hide a section when there is no data being fetched. Could you provide a sample code for this? ...

Backdrop dimming the Material UI Modal

My modal is designed to display the status of a transaction on my website, but I'm facing an issue where the backdrop dimming effect is being applied over the modal. Instead of appearing white as intended, the modal ends up having a dark gray tint. I ...

Utilizing CSS files to incorporate loading icons in a component by dynamically updating based on passed props

Is it possible to store icons in CSS files and dynamically load them based on props passed into a component? In the provided example found at this CodeSandbox Link, SVG icons are loaded from the library named '@progress/kendo-svg-icons'. Instea ...

Tips for injecting a service into a class (not a component)

Can you inject a service into a class that is not a component? Consider the following scenario: Myservice import {Injectable} from '@angular/core'; @Injectable() export class myService { dosomething() { // implementation } } MyClass im ...

Limit SQL queries in ASP.net C# to only perform SELECT operations

We're currently developing a user interface that allows users to: Execute SELECT statements on the database (with the option to use Joins or subqueries) View the results on the same screen Currently, we are verifying if the input string contains an ...

Can the keys be extracted from the combination of multiple objects?

Basic Example Consider this scenario type Bar = { x: number } | { y: string } | { z: boolean }; Can we achieve type KeysOfBar = 'x' | 'y' | 'z'; I attempted this without success type Attempted = keyof Bar; // ...

Node C++ Addon Typescript declaration file

I have developed a Node C++ Addon that wraps a class similar to the one outlined in the official Node documentation. By using require(), I am able to access my addon and retrieve the constructor for my class in order to instantiate it. const { MyClass } = ...