Question

对APP服务（http://xxxx.azurewebsites.net）的任何Ajax / JQuery调用都会抛出错误

阻止跨源请求：同源策略禁止读取远程资源在 http://api-xxx.azurewebsites.net/api/demo/1234567。（原因：CORS标题 'Access-Control-Allow-Origin'与'（null）'不匹配。

要点：

1。在Azure门户中将CORS设置为*

2。 REST API也 CORS 已启用。

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

Answer 1

从Azure以及两个不同的（请求和响应）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'

需要注意的要点（在我的情况下：吼叫线也投掷CORS Error）

contentType：'application / json;字符集= UTF-8'

阻止跨源请求：Azure应用服务问题

1 个答案: