Cross-Origin Request Blocked: Azure App Service Issue

Question

Any Ajax / JQuery call to APP Service(http://xxxx.azurewebsites.net) throw bellow error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api-xxx.azurewebsites.net/api/demo/1234567. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’).

Point to be Noted:

1. CORS set to * in Azure Portal

2. REST API also CORS Enabled.

config.EnableCors();

CORS setting in controller level

[EnableCors(origins: "*", headers: "*", methods: "*")]

REST API Web.Config Settings

<httpProtocol>      
<customHeaders>       
 <add name="Access-Control-Allow-Origin" value="*" />     
 </customHeaders>   
 </httpProtocol>

JQuery script

<script type="text/javascript">     
        $(document).ready(function () {            
            $("#b1").click(function () {               
                var jsondata = $('#s1').text();
                $.ajax({
                    url: "http://api-xxx.azurewebsites.net/api/demo/1234567",
                    type: "POST",
                    data: JSON.stringify(jsondata),
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        $("#div1").html(result);
                    },
                    error: function (error) {
                        //$("#div1").html(error);
                        console.log("Something went wrong", error);
                    }                
                });

                console.log(JSON.stringify(jsondata));
            });
        });

Answer 1

Two changes got the success as Return from Azure as well as from two different (Request & Response) localhost:port

in REST API Web.Config

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE"/>
        <add name="Access-Control-Max-Age" value="3628800"/>
      </customHeaders>
</httpProtocol>

Few changes in JQuery Script

<script type="text/javascript">     
        $(document).ready(function () {            
            $("#b1").click(function () {               
                var jsondata = $('#s1').text();
                $.ajax({
                    url: "http://api-xxx.azurewebsites.net/api/demo/1234567",
                    type: "POST",
                    data: JSON.stringify(jsondata),
                    contentType: 'application/json', //<--- This Line make everthing perfect
                    dataType: 'json',
                    async: false,
                    complete: function (response) {
                        console.log(response);
                     },
                     statusCode: {
                        200: function () {
                            console.log("Success...");
                        },
                        400: function () {
                            console.log("Bad Request...");
                        }
                    },              
                });

                console.log(JSON.stringify(jsondata));
            });
        });

Major changes

contentType: 'application/json'

Point to be noted (In My case : bellow line also throw CORS Error)

contentType: 'application/json; charset=utf-8'