No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxxx.azurewebsites.net' is therefore not allowed access

Question

I am getting No 'Access-Control-Allow-Origin' header is present on the requested resource error when azure web application is requesting azure web API resource, but locally it is working fine, I am getting the above error after deployment when I am accessing the azure website.

Below is the code:

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 };

}

controller method:

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

I have had this problem earlier. Either enable CORS via CODE or via azure portal (or via ARM template for automate deployment) and not in both places, if you do at both places the setting on azure overrides - atleast that has been my experience. I would suggest to start with azure portal.

Navigate to the web app under a resource group and then search for CORS setting --> then add * or the specific origin that you want to allow there. If this works.

Note: Ensure to add the CORS setting via portal to your Odata API site and not your web app

Via Portal https://learn.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

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

Via Code WebApiConfig.cs

config.EnableCors();

PSellerIndustryFilterController.cs

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

Answer 2

You should add headers to your request because of CORS:

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