Question

问题背景：

这似乎是一个普遍的问题，而且我已经犯了一个错误。

我有一个目前在Azure中托管的标准WebApi和一个调用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请求。

请注意，调用的header属性已使用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控制器拒绝此请求的原因。

Answer 1

浏览器强制强制使用CORS请求标头，以用于跨源请求。没有办法改变它们。事实上，如果客户端可以设置CORS允许标头，CORS将毫无意义。

您看到的错误是您的服务器在预检请求期间未在响应中包含所需的Access-Control-Allow-*标头。当客户端执行除简单GET请求之外的操作时，执行预检请求（OPTIONS），包括添加自定义请求标头（您的允许标头是哪个）时。

公平地说，错误可能无助于您的混淆（＆＃34; ... 请求的资源＆＃34;}

。

我建议从请求中删除CORS标头并再次尝试。如果仍然失败，请使用Fiddler之类的HTTP代理捕获请求，并使用预检请求和响应中的CORS标头更新您的问题。

Answer 2

首先，您在这里混合协议http和https。检查您请求的网址是否有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

Answer 3

您的服务器可能正在返回500错误，并且正是500错误响应本身没有启用CORS标头。为了确认，我建议您使用Postman之类的工具直接测试您的API，并确保实际的API请求成功完成。

另外，您可以考虑是否需要各种服务器状态响应消息（500,403,302等）以包含CORS头。

WebApi CORs - 请求错误时出现Access-Control-Allow-Origin标头

3 个答案: