javascript - ajax GET - XMLHttpRequest 无法加载

标签 javascript ajax html azure asp.net-web-api

我正在尝试从外部 api 获取数据,但是 我不断收到错误消息:

XMLHttpRequest 无法加载...请求的资源上不存在“Access-Control-Allow-Origin” header 。

这是我的代码:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
        (function () {
            $.support.cors = true;
            $.ajax({
                type: "GET", url: "http://zhettoapi.azurewebsites.net/api/Values?product=Coca Cola", success: function (data) {
                    window.alert("" + data);
                    //example of setting innerHTML of object
                    document.getElementById("myElement").innerHTML = "The number is:" + data;
                }, error: function (xhr, status, error) {
                    // Display a generic error for now.
                    alert("Error: " + xhr + "   " + status + "   " + error);
                }
            });
        })();
    </script>
</head>
<body>
    <div id="myElement"></div>
</body>
</html>

最佳答案

因为我可以看到 use 使用了 Get url 中提到的 azurewebsites ( "http://zhettoapi.**azurewebsites**.net/api/Values.... ),我对此有一些经验,我想解决你的问题,即使这个问题没有用 Azure 标记。

假设:您已使用WebAPI。并作为网站部署在Azure上。 (我确信,确实如此)。

由于您尝试以 ajax.get 请求的形式从其他域访问 Azure Web API URL,因此由于跨域 (CORS) 安全性,它被阻止。所以这里的第一件事是启用它(托管的 WebAPI 项目)CORS。

启用 CORS 的步骤:

  1. 安装此 - 使用 NuGet 安装包 Microsoft.AspNet.WebApi.Cors
  2. 打开文件 App_Start/WebApiConfig.cs。将以下代码添加到 WebApiConfig.Register 方法中。
  3. 接下来,将 [EnableCors] 属性添加到 Controller 类:

    具有以下参数

    [EnableCors(起源:“http://zhettoapi.azurewebsites.net ”, header :“”,方法:“”)]

  4. 重新部署您的 WebAPI 项目。

来源 - http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

更多链接 - http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En

关于javascript - ajax GET - XMLHttpRequest 无法加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26366299/

相关文章:

html - 在 MS edge 上滚动中断转换 css

javascript - 在 Cordova 应用程序中使用 Blackberry webworks API

javascript - 通过更改绘图数据更新浮点图

javascript - 滚动不适用于 css()?

javascript - 从选项卡式选择中交换 div 信息?

php - jquery ajax更新mysql表

java - GWT 中条件属性的 GSS CSS 表达式?

javascript - 用 POST 替换 GET

javascript - 如何通过 ajax(无 jquery)发送 multipart/form-data 表单内容?

jQuery $.post();