请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问来源“http://xxxxx.azurewebsites.net”答案

【问题标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxxx.azurewebsites.net' is therefore not allowed access请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问来源“http://xxxxx.azurewebsites.net”
【发布时间】：2017-04-25 03:29:46
【问题描述】：

当 azure Web 应用程序请求 azure Web API 资源时，我收到 No 'Access-Control-Allow-Origin' header is present on the requested resource error，但在本地它工作正常，部署后出现上述错误当我访问 azure 网站时。

下面是代码：

angular js 服务：

function industrysearchservice(appConfig, $q) {

var dsIndustry;
var schemaIndustry = {
    data: function (response) {
        return response.value;
    },
    total: function (response) {
        return response['@odata.count'];
    },
    model: {
        id: "Industry"
    }
};

getIndustries = function (filter) {

    var deferred = $q.defer();

    var dsFetch = new kendo.data.DataSource({
        batch: false,
        schema: schemaIndustry,
        type: "odata-v4",
        serverFiltering: true,
        serverSorting: true,
        serverPaging: true,
        pageSize: 20,

        transport: {
            read: {
                url: appConfig.odataUri + "/PSellerIndustryFilter",
                dataType: "json",
                data: {
                    $select: "Industry"
                }
            }
        }
    });

    if (!angular.isUndefined(filter))
        dsFetch._filter = filter;


    dsFetch.fetch().then(function () {
        dsIndustry = dsFetch;
        deferred.resolve(dsIndustry);

    });

    return deferred.promise;
}

return { getIndustries: getIndustries };

}

控制器方法：

public class PSellerIndustryFilterController : ODataController
    {
    PSellerContext db = new PSellerContext();

    private bool PSellerIndustryExists(System.Guid key)
    {
        return db.PSellerIndustryFilters.Any(p => p.Industry == key.ToString());
    }
    protected override void Dispose(bool disposing)
    {
        db.Dispose();
        base.Dispose(disposing);
    }

    [EnableQuery]
    public IQueryable<PSellerIndustryFilter> Get()
    {
        return db.PSellerIndustryFilters;
    }

    [EnableQuery]
    public SingleResult<PSellerIndustryFilter> Get([FromODataUri] System.Guid key)
    {
        IQueryable<PSellerIndustryFilter> result = db.PSellerIndustryFilters.Where(p => p.Industry == key.ToString());
        return SingleResult.Create(result);
    }
}

enter image description here

【问题讨论】：

这是一个 CORS 问题，请检查与此相关的答案。喜欢这个：stackoverflow.com/a/24097520/1658906

标签： angularjs azure

【解决方案1】：

我之前也遇到过这个问题。通过 CODE 或通过 azure 门户（或通过 ARM 模板进行自动部署）启用 CORS，而不是在这两个地方启用 CORS，如果您在两个地方都启用 azure overrides 的设置 - 至少这是我的经验。我建议从 azure 门户开始。

导航到资源组下的 Web 应用程序，然后搜索 CORS 设置 --> 然后添加 * 或您想要允许的特定来源。如果这行得通。

注意：确保通过门户将 CORS 设置添加到您的 Odata API 站点，而不是您的网络应用程序

通过门户 https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

通过 ARM https://github.com/azure-samples/app-service-api-dotnet-todo-list/blob/master/azuredeploy.json

通过代码 WebApiConfig.cs

config.EnableCors();

PSellerIndustryFilterController.cs

[EnableCors(origins: "http://Yoururl.azurewebsites.net", headers: "*", methods: "*")]
public class PSellerIndustryFilterController : ODataController
{
    //details
}

【讨论】：

【解决方案2】：

由于 CORS，您应该在请求中添加标头：

transport: {
    read: {
        url: appConfig.odataUri + "/PSellerIndustryFilter",
        dataType: "json",
        data: {
            $select: "Industry"
        }
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }
}

【讨论】：