调用 External WebApi 时出现“Access-Control-Allow-Origin”错误

Posted 2023-03-04

【中文标题】调用 External WebApi 时出现“Access-Control-Allow-Origin”错误

【英文标题】：Getting 'Access-Control-Allow-Origin' error when I call External WebApi

【发布时间】：2021-09-03 14:55:39

【问题描述】：

我找到了很多关于这个问题的页面，但没有一个解决方案有效。

我在调用 WebApi 方法 (C#) 的视图中有一个 javascript 按钮

            $('#btn-Sign-in', this).click(function () 

              var apiUrl = 'https://localhost:44391/api/test';
           fetch(apiUrl).then(response => 
           return response.json();
           ).then(data => 
           // Work with JSON data here
          console.log(data);
           ).catch(err => 
          // Do something for an error here
          );
          );

这是调用外部 api 的我的 Webapi 方法：

 [RoutePrefix("api")]
public class TestController : ApiBaseController

    [HttpGet]
    [Route("redirectforauth")]
    [RequiresPermission("Home:View")]

    [HttpGet]
    [Route("test")]
    [RequiresPermission("Home:View")]

    public async Task<IHttpActionResult> ConnectExternal()
    
        var request = new FlurlRequest("URL of an external website")
                     .SetQueryParam(...)
                     .SetQueryParam(...)
                     .SetQueryParam(...)
                     .SetQueryParam(...);

        var redirectUrl = request.Url.ToInvariantString();

        return  Redirect(redirectUrl);
    

当我运行项目时，我收到了这个错误：

 CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

【问题讨论】：

失败的不是对外部 API 的调用——来自 C# 的 http 请求不执行 CORS 检查（除非你明确要求这样做）——而是对https://localhost:44391/api/test 的调用——上面有按钮的 JS/ 页面大概不在localhost:44391 域上

【参考方案1】：

此错误是由于您的 Web 应用程序 URL 和 C# API URL 的来源不同（不在同一端口或同一主机上运行）。如果两个 URL 具有相同的方案、主机和端口，则它们具有相同的来源。

EX：您的 C# URL https://localhost:44391 与您的 Web 应用程序 URL 不同。

首先，为了确保您收到错误是由于您的 c# api 而不是由于外部 api，请在您的操作中注释掉您的外部 api 请求代码，然后直接从您的 api 返回一些内容到 Web 应用程序。 （如果错误来自外部 Api，则该外部 api 需要处理此问题以允许访问其他来源。）

如果您收到错误是由于您的 c# api 而不是由于外部 api，一种方法是在您的 C# WebApi 应用程序中启用 CORS。您可以为应用程序中的所有 Web API 控制器的每个操作、每个控制器或全局启用 CORS。

您可以在您的 C# API 应用程序中安装此 nuget 包：

Microsoft.AspNet.WebApi.Cors

在 App_Start/WebApiConfig.cs 中，将此代码添加到 WebApiConfig.Register 方法中：

config.EnableCors();

接下来，将 [EnableCors] 属性与您的 Web 应用程序 URL 添加到您的 TestController 类中。

例如：如果您的 Web 应用程序 URL 是 localhost:3000，请将其添加到 origins 中，如下所示。

[EnableCors(origins: "http://localhost:3000", headers: "*", methods: "*")]
public class YourController : ApiController 
    // Your methods...

现在来自您的 Web 客户端的 AJAX 请求应该可以工作了。 GET、PUT 和 POST 方法都是允许的。

有关如何启用 CORS 及其工作原理的更多详细信息： Enable cross-origin requests in ASP.NET Web API 2