Base solution for your next web application
Open Closed

CORS Policy issue when deployed to Azure #7570


User avatar
0
vnetonline created

I have just deployed the AspNetCore & Angular App Version 7.1.0 to Azure and I am getting the following error

Access to XMLHttpRequest at 'https://amazingsolutions-server.azurewebsites.net/AbpUserConfiguration/GetAll?d=1567147694729' from origin 'https://amazingsolutions-client.azurewebsites.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

can you please help?

appsetting.production.json

{ "ConnectionStrings": { "Default": "Server=tcp:{DB Name};Initial Catalog={Database Name};Persist Security Info=False;User ID={User Name};Password={Password}!;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;" }, "App": { "ServerRootAddress": "https://amazingsolutions-server.azurewebsites.net", "ClientRootAddress": "https://amazingsolutions-client.azurewebsites.net", "CorsOrigins": "https://amazingsolutions-client.azurewebsites.net, https://*.amazingsolutions.com.au" } }

appconfig.production.json

{ "remoteServiceBaseUrl": "https://amazingsolutions-server.azurewebsites.net", "appBaseUrl": "https://amazingsolutions-client.azurewebsites.net", "localeMappings": { "angular": [ { "from": "pt-BR", "to": "pt" }, { "from": "zh-CN", "to": "zh" }, { "from": "he-IL", "to": "he" }, { "from": "es-MX", "to": "es" }, { "from": "vi", "to": "en" } ], "moment": [ { "from": "es-MX", "to": "es" }, { "from": "zh-Hans", "to": "zh-cn" }, { "from": "vi", "to": "en-gb" } ] } }


1 Answer(s)
  • User Avatar
    0
    vnetonline created

    If you are getting the following error

    Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Solution:

    Enable Cross-Origin Resource Sharing (CORS) on your Azure App Service Web App.

    Explanation:

    1. From the Azure Portal locate your App Service that is hosting your AspNetCore website
    2. Click CORS

    1. Enter the full URL of the site you want to allow to access your AspnetCore or * to allow all domains
    2. Click Save
    3. Now you should be able to access your AspNetCore apis from your Angular app.

    Be sure to empty Cache and Hard reload your browser