从不同域名检索 JSON 的奇怪问题（headers Access-Control-Allow-Origin 到位并正在工作）

Question

我正在尝试使用 JSON 抓取跨域创建一个基本测试....我有 Access-Control-Allow-Origin 并被浏览器识别，甚至 JSON 输出，但出于某种原因，Jquery 不会使用该内容。没有控制台错误，检查了网络 return，一切正常……不确定发生了什么。

这是我的 html 代码：

<head>
  <title>Hello jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "http://myurlremoved:)"
      }).then(function(data) {
        $('.greeting-id').append(data.id);
        $('.greeting-content').append(data.content);
      });
    });
  </script>
</head>

<body>
  <div>
    <p class="greeting-id">The ID is </p>
    <p class="greeting-content">The content is </p>
  </div>

从那里开始，我只是通过一个假端点输出简单的静态 JSON：

{"id":439,"content":"Hello, World!"}

我一直在这个问题上来来回回...我不确定交易是什么。任何人都看到任何明显的我失踪的东西吗？浏览器显示 header 允许通过跨域 header 中的域通配符跨域...我不确定还有什么问题...但这对我来说是新的.

Answer 1

返回的结果是一个 json 对象的字符串，而不是实际的对象。您必须执行以下操作之一：

$.getJSON 方法而不是 ajax.
在 data 变量上使用 parseJSON。
在 ajax 中添加 dataType: "json" 作为 url 下面的选项之一要求。

尝试

<!DOCTYPE html>
<html>
    <head>
        <title>Hello jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
$(document).ready(function() {
    $.ajax({
        url: "http://framework.testlocker.net/endpoints/testrest.cfm",
        dataType:"json"
    }).then(function(data) {
       $('.greeting-id').append(data.id);
       $('.greeting-content').append(data.content);
    });
});
</script>
    </head>
    <body>
        <div>
            <p class="greeting-id">The ID is </p>
            <p class="greeting-content">The content is </p>
        </div>
    </body>
</html>

输出：

从不同域名检索 JSON 的奇怪问题（headers Access-Control-Allow-Origin 到位并正在工作）

Bizarre issue with JSON retrieval from different domain name (headers Access-Control-Allow-Origin in place and working)

html

jquery

json

header

access-control