我无法解决“请求的资源上不存在‘Access-Control-Allow-Origin’header”问题

Question

我有一个使用 .net 核心 3.1 完成的 WebApi。 它托管在我笔记本电脑的 IIS 中。 同时我开发了一个 angular UI 并发布在同一个 IIS 中。 相同的 IIS 但每个应用程序都有自己的端口。 当我从 ui 插入一条新记录时，它已成功完成，这意味着 POST 成功。 如果我尝试修改它，意味着一个 PUT，它不会 go 通过。 Seeing the developer tools in the browser, the console displays a message saying the Access to XMLHttpRequest at 'http://blablabla.com:777/api/items/333' from origin [the web application url goes here which is something like http ://blablabla.com:778] 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”header。 我已经尝试了我在这个网站上找到的东西。 这意味着我修改了 Startup.cs，将其添加到 ConfigureServices 中：

services.AddCors(options => {
                options.AddPolicy(name: "Policy1", builder => {
                    builder.AllowAnyOrigin().AllowAnyMethod().WithHeaders(HeaderNames.ContentType, "Access-Control-Allow-Origin");
                });
                options.AddPolicy(name: "Policy2", builder => {
                    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
            });
                options.AddPolicy(name: "Policy3", builder => {
                    builder.WithOrigins("http://name.com:7771").AllowAnyHeader().AllowAnyMethod();
                });
            });

这在 Configure 方法中（在 app.UseRouting(); 之后）：

       app.UseCors("Policy2");

我不知道还能尝试什么。

Answer 1

经过一段时间对这个问题充满挫败感后，我终于找到了解决方案。

尝试更新（PUT）时遇到此问题。 我可以毫无问题地插入（POST）。

Access to XMLHttpRequest at 'http://superinspections.com:8000/api/Cities/12962' from origin 'http://superinspections.com:8001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin ' header 存在于请求的资源上。

CORS 策略已阻止从源访问 XMLHttpRequest：请求的资源上不存在“Access-Control-Allow-Origin”header。

解决方案：在 IIS 版本 10 中：

单击您遇到访问源问题的网站（后端），然后双击 HTTP Reaponse Headers 图标。 添加以下条目： Access-Control-Allow-Headers with value * Access-Control-Allow-Methods with value POST, PUT, GET, OPTIONS Access-Control-Allow-Origin with value *

这会将以下内容添加到该站点的 web.config 文件中：

    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Headers" value="*" />
                <add name="Access-Control-Allow-Methods" value="POST, PUT, GET, OPTIONS" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>

运行程序后，我没有出现 Access-Control-Allow-Origin 问题，但我收到一条新消息：HTTP 405 Method Not Allowed。 为了解决这个问题，我在这里找到了解决方案：

Web API Put Request 生成 Http 405 Method Not Allowed 错误

解决方案是在前端和后端的 web 配置文件中使用以下条目删除 WebDAV 模块。

将它放在 <system.webServer> 中。

<modules runAllManagedModulesForAllRequests="true">
    <remove name="WebDAVModule"/> <!-- add this -->
</modules>

并将其添加到处理程序部分：

<handlers>
    <remove name="WebDAV" />
    ...
</handlers>

之后，该应用程序按预期工作。 我需要补充一点，我需要在 Startup.cs 中保留 cors 配置。

在配置服务中：

        services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                    builder => builder
                    .AllowAnyMethod());
            });

在配置中，在 app.UseRouting() 和 app.UseAuthentication() 之间

        app.UseCors("CorsPolicy");

以及可能需要它的控制器中的属性 [EnableCors("CorsPolicy")]。

对于我需要的，即 Angular 应用程序的开发和测试，这就足够了。 您可以在客户端中使用 Cors 配置来摆脱服务器设置，就像我完成开发后所做的那样。 但我认为 WebDAV 部分是不可避免的。

我需要补充的一件事是，如果您重新发布后端，web 配置会更改 go。

任何意见将不胜感激。 特别解释什么是WebDAV。