使用 Microsoft Edge 在 Visual Studio 中运行 Web 应用程序的问题

Question

I have inherited a MVC application (Visual Studio 2013) using Angular that is not working when viewing the app in Microsoft Edge.

When the browser is set to use Microsoft Edge when debugging in VS I see a number of toast errors when the home page loads. I have also found the followiing:

1. Any breakpoints set in any of the "controller.js" files results in "No symbols loaded for this document." When the browser is set to IE the breakpoints are hit.

2. Viewing the console for the developer tools in Microsoft Edge, I see errors such as "Access to XMLHttpRequest at 'http://localhost:57113/api/todo' from origin 'http://localhost:55798' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." This does not occur in IE.

3. In the web.config, as settings for "LoginServiceName" value http://localhost:55798/token and "RemoteServiceName" value http://localhost:55798/api. I searched on "55798" and replaced it with the port 57113 throughout the application, but am still getting the error in point 2

4. The site that has been deployed to the test server is showing the same errors, but the site deployed to the production server from VS is not having issues.

I've read a few posts regarding CORS, but am not sure why the site is working in the production environment, but not test and not when running it through VS using Microsoft Edge. I'm also not understanding why port 57113 is being used when 55798 was set in the web.config file and why when 55798 was updated to 57113 it's still looking for 55798.

When I search on "XMLHttpRequest" in the solution, I see there is reference to it in jquery-2.0.3.js/min.js. Would using the most recent jquery file be needed?

I tried adding

            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />

to my applicationhost.config file for IISExpress, but this did not resolve the issue.

When I step through the code using Microsoft Edge developer tools, it hits the third line of jquery-2.0.3.min.js, completes, there toast errors display, the code then enters in the angular.js file. When I look in Network > XHR in developer tools, I see that the Request URL is http://localhost:57113/api/todo and in the Request Headers:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 0
Content-Type: application/x-www-form-urlencoded
Host: localhost:57113
Origin: http://localhost:55798
Referer: http://localhost:55798/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Microsoft Edge";v="90"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36 Edg/90.0.818.51

Any ideas?

Answer 1

From the Request Headers you post, it seems that you're using Edge version 90 which is outdated. I find a similar issue with this previous version of Edge. It shows that the issue is fixed in a newer version of Edge. Could you please update your Edge browser to the latest version 96 and test again? Please tell us the test result if the issue is fixed in the latest version of Edge.