angularjs - 请求的资源上不存在 'Access-Control-Allow-Origin' header 。因此不允许访问 Origin 'http://xxxxx.azurewebsites.net'

Question

当 azure web 应用程序请求 azure web API 资源时，我收到请求的资源上不存在“Access-Control-Allow-Origin” header 错误，但在本地它工作正常，部署后出现上述错误当我访问 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 };

}

Controller 方法:

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 覆盖设置 - 至少这是我的经验。我建议从 azure 门户开始。

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

注意:确保通过门户将 CORS 设置添加到您的 Odata API 网站而不是您的 Web 应用

通过门户 https://learn.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
}