如何使用 ajax 从 web api 获取 json 值？答案

【问题标题】：How to fetch json value from web api using ajax?如何使用 ajax 从 web api 获取 json 值？
【发布时间】：2017-03-31 19:49:25
【问题描述】：

这可能是一个愚蠢的问题，但我正在为此苦苦挣扎这让我可以发布我迄今为止尝试过的代码：

Webapi 代码：

  [EnableCors(origins: "http://localhost:8080", headers: "*", methods: "*")]
        [HttpGet]
        [Route("~/api/getail/{id}/{criteriaid}")]
        public IHttpActionResult GetIncidentByResourceID(int id, int criteriaid)
        {
            IncidentDisplayApiModelCollection collection = objIncidentApiManager.GetDisplayList(id, criteriaid, 4);
            return Json(collection);
        }

这是示例 ajax 请求：

   <script src="js/jquery-3.2.0.min.js"></script>
              <script >
       $(document).ready(function(){
       $.ajax({
    url: "http://localhost:8080/sf/api/getail/1848/29",
    dataType: "json",
     success: function( response ) {
        console.log( response ); // server response
    },
    error: function( response ) {
        console.log( response ); // server response
    }
});

});
       </script>

在 Firefox 控制台中得到的是：

Object { readyState: 0, getResponseHeader: .ajax/y.getResponseHeader(), getAllResponseHeaders: .ajax/y.getAllResponseHeaders(), setRequestHeader: .ajax/y.setRequestHeader(), overrideMimeType: .ajax/y.overrideMimeType(), statusCode: .ajax/y.statusCode(), abort: .ajax/y.abort(), state: .Deferred/e.state(), always: .Deferred/e.always(), catch: .Deferred/e.catch(), 9 more… }  index.html:59:9

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/sf/api/getail/1848/29. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我已经在 nuget manager 中下载了 cors 并添加了 confi.enablecors();在 webapi 配置中。谁能帮我解决这个问题提前谢谢！！

【问题讨论】：

在将其标记为重复之前，我已经解释过我已经尝试了该问题中的所有方法，但仍然无法正常工作
您的 ajax 代码托管在哪个域（IP 地址）中？
不是 ip 它只是来自文件
CORS 问题发生在源地址和目标地址不同的情况下。你必须在某个 url 上测试这个 ajax 请求说：localhost:3000
我给出的是正确的IP地址

标签： jquery ajax asp.net-web-api c#-3.0

【解决方案1】：

origins 参数应包含Origin 请求标头的值。

当从带有file:// URI 的页面发出请求时，浏览器将Origin 标头设置为null（字符串）（我在Firefox 和Chrome 中测试过）。

因此，尝试在origins 参数中添加“null”：

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

但我不确定这是否可行（如此不寻常的价值！）

或者，更简单，只需将其设置为“*”以允许来自任何来源的请求：

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

注意：(!) 部署到生产环境时，仔细考虑，然后再允许来自任何来源的请求。这意味着实际上任何网站都可以对您的 Web API 进行 AJAX 调用。

希望对你有帮助

【讨论】：