No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http：//xxxxx.azurewebsites.net'因此不允许访问

Question

我得到No＆＃39; Access-Control-Allow-Origin＆＃39;当azure Web应用程序请求azure web API资源时，标头出现在请求的资源错误上，但是在本地它工作正常，我在访问azure网站时遇到上述错误。

以下是代码：

angular js service ：

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

Answer 1

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

导航到资源组下的网络应用，然后搜索CORS设置 - ＆gt;然后添加*或您想要允许的特定来源。如果这样的话。

注意：确保通过门户网站将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
}

Answer 2

由于CORS，您应该为您的请求添加标题：

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