WebApi CORs-请求错误时存在Access Control Allow Origin标头

本文关键字:Control Allow Origin 标头 Access 存在 CORs- 请求 错误 WebApi | 更新日期: 2023-09-27 18:07:53

问题背景:

这似乎是一个常见的问题,也是我遇到的一个问题。

我有一个标准的WebApi,目前托管在Azure中,还有一个调用AngularJS应用程序,它调用上述WebApi上的一个端点。

调用WebApi的AngularJS应用程序URL为:

http://siteang.azurewebsites.net

WebApi的地址是:

https://site.azurewebsites.net

我想确保只有我在http://siteang.azurewebsites.net的应用程序能够访问https://site.azurewebsites.net的WebApi

问题:

我在向WebApi服务提交AngularJS应用程序的表单时收到以下错误。

XMLHttpRequest cannot load https://site.azurewebsites.net/api/ShoppingComparison/GetC…itemIndex=Baby&itemtosearch=baby&lowToHigh=false&maxPrice=50000&minPrice=0.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://siteang.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 500.

代码:

以下是对WebApi服务的$http请求。

请注意,调用的头属性已设置为AngularJS站点的地址。

   loadSearchList: function (itemToSearch, itemIndex, countryCode) {
        self.itemToSearch = itemToSearch;
        self.itemCatagory = itemIndex;
        self.country = countryCode;
        self.searchList = [];
        $http({
            method: 'GET',
            url: 'https://site.azurewebsites.net/api/ShoppingComparison/GetComparisons',
            params: {
                itemtosearch: itemToSearch,
                itemIndex: itemIndex,
                countryCode: countryCode,
                maxPrice: '50000',
                minPrice: '0',
                highToLow: true,
                lowToHigh: false,
                amazonEbay: true,
                amazonOnly: false,
                ebayOnly: false
            },
            headers: {
                'Content-Type': 'text/plain; charset=UTF-8',
                'Access-Control-Allow-Origin': 'http://siteang.azurewebsites.net',
                'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE'
            }
        }).success(function (data) {
            //Success Handler.
        }).error(function (data) {
            //Error Handler.
        });
    }

以下是AngularJS应用程序正在调用的WebApi控制器。请注意,标头已设置为接受正在进行呼叫的http://siteang.azurewebsites.net站点:

 [System.Web.Http.HttpGet]
    [EnableCors(origins: "http://siteang.azurewebsites.net", headers: "*", methods: "*")]
    public ViewItemModel GetComparisons([FromUri] ComparisonRequestModel comparisonModel)
    {
        return _callAndSearchApis.SearchApis(comparisonModel);
    }

在确定WebApi控制器拒绝此请求的原因方面提供的任何帮助都将不胜感激。

WebApi CORs-请求错误时存在Access Control Allow Origin标头

CORS请求头是浏览器为跨源请求自动施加的。没有办法改变它们。事实上,如果客户端可以设置CORS允许标头,那么CORS将毫无意义。

您看到的错误是,在飞行前请求期间,服务器没有在响应中包含所需的Access-Control-Allow-*标头。当客户端正在执行除简单GET请求之外的其他操作时,包括添加自定义请求标头(Allow标头就是这样(时,会执行Preflight请求(OPTIONS(。

公平地说,错误("…不存在于请求的资源中"(可能无助于您的困惑。

我建议从请求中删除CORS头,然后重试。如果仍然失败,请使用Fiddler之类的HTTP代理捕获请求,并在飞行前请求和响应中使用CORS标头更新您的问题。

首先,您在这里混合了http和https协议。请检查您请求的url是否具有https。请先确保这是正确的。然后,您需要弄清楚服务器是否拒绝以及它在做什么。有许多资源可用于启用cors。即使是Stackoverflow也有许多线程。

https://stackoverflow.com/search?q=Enabling+Cors+WebApi

http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

编辑后的答案:有时IIS会干扰飞行前OPTIONS请求。试着在web.config中做这样的操作,看看它是否有效。

http://benfoster.io/blog/aspnet-webapi-cors

很可能您的服务器返回500错误,而500错误响应本身没有启用CORS头。为了确认这一点,我建议您使用Postman这样的工具来直接测试您的API,并确保实际的API请求成功完成。

另外,您可以考虑是否希望各种服务器状态响应消息(对于500、403、302等(包含CORS头。