从 Angular JS 调用 Web API 错误：“Access-Control-Allow-Origin”标头包含多个值，因此不允许访问 Origin

Posted 2023-03-04

【中文标题】从 Angular JS 调用 Web API 错误：“Access-Control-Allow-Origin”标头包含多个值，因此不允许访问 Origin

【英文标题】：Calling from Angular JS to web API error: The 'Access-Control-Allow-Origin' header contains multiple values, Origin is therefore not allowed access

【发布时间】：2019-02-12 15:08:48

【问题描述】：

列表项

我在“https://example.com/api/gd/alldata”上部署了一个 Web API，当我直接从浏览器 URL 运行它时，它会显示结果。但是当我从其他 Angular JS 应用程序调用它时，它给了我以下错误。

错误：

未能加载“https://example.com/api/gd/alldata” 'Access-Control-Allow-Origin' 标头包含多个值 'http://localhost:64000, http://localhost:64000, *', 但只允许一个。因此不允许访问 Origin 'http://localhost:64000'。

这是我在另一个应用程序中的新 angularjs 服务。

  var promise = $http(

        method: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "https://example.com/api/gd/alldata",
        //headers: headers, 
        headers: 
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
        
    )
        .then(function (response) 
            console.log(response.data)
            return response.data;
        ,
        function (response) 
                return response.data;
            );

以下是我的 API 代码已经部署在某个链接上，

我在 webapiconfig 和 startup.cs 文件中启用了 cors。

Startup.cs 文件

    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

webapiconfig.cs

 config.EnableCors();

你能告诉我我在哪里做错了，或者我在代码中遗漏了什么或做错了什么。

【问题讨论】：

您的 API 托管在哪里？

在 azurewebsites.net 上

您是否在 azure 的应用服务中添加了 CORS 设置？

不，我没有在 azure 上添加 CORS 设置。我刚刚在我的网站服务中添加了 cors 并将其部署在 azure 上。

在下面查看我的答案。

【参考方案1】：

由于您在 Azure 上托管并从 localhost（本地开发环境）调用，因此您必须在 Azure 应用服务上更新以下 CORS 设置：

在https://portal.azure.com 上转到您的应用服务 搜索 CORS（按 CTRL + /） 在允许的来源下添加您的localhost:6400 或更好的* 保存