跨域请求被阻止:Azure应用服务问题 [英] Cross-Origin Request Blocked: Azure App Service Issue

问题描述

对应用程序服务的任何Ajax/JQuery调用( http://xxxx.azurewebsites.net )都在下面错误

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

跨源请求被阻止:同源策略禁止阅读 位于的远程资源 http://api-xxx.azurewebsites.net/api/demo/1234567. (原因:CORS标头 "Access-Control-Allow-Origin"与(null)"不匹配).

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)’).

要注意的点:

1..在Azure Portal中CORS设置为*

1. CORS set to * in Azure Portal

2..RESTAPI也 CORS 已启用.

2. REST API also CORS Enabled.

config.EnableCors();

控制器级别的CORS设置

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

REST API Web.Config设置

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

jQuery脚本

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

推荐答案

作为Azure的Return以及两个不同的(请求和响应)localhost:port

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

在 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>

JQuery脚本中的少量更改

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

主要更改

contentType:'application/json'

contentType: 'application/json'

需要注意的地方(在我的情况下:波纹管也抛出CORS Error)

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

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

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

这篇关于跨域请求被阻止:Azure应用服务问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！