如何跨域展示其他站点的JSON数据？

看起来你碰到了浏览器同源策略导致的CORS（跨域资源共享）限制问题，这是浏览器为了安全默认实施的规则，下面给你几个可行的解决思路：

1. 让目标服务器配置CORS响应头（推荐的生产环境方案） #

这是最合规且长期有效的解决方式。需要目标API服务器（https://dev.truthify.com）在响应中添加Access-Control-Allow-Origin头，允许你的前端域名访问：

• 如果服务器是你自己维护的，可以在后端框架（比如Django、Express、Spring等）里配置CORS规则，或者在Nginx这类反向代理中添加响应头：

  add_header Access-Control-Allow-Origin "你的前端域名";
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  

• 如果服务器不是你控制的，需要联系该API的管理员，请求他们将你的域名加入允许访问的列表。

2. 搭建自己的代理服务器（开发/生产都适用） #

浏览器的同源策略只限制前端页面发起的请求，服务器之间的请求不受这个限制。你可以搭建一个简单的中间代理，前端请求你的代理服务器，代理再去请求目标API，最后把结果返回给前端。

比如用Node.js + Express快速写一个代理示例：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/proxy-video-info', async (req, res) => {
  try {
    const response = await axios.get('https://dev.truthify.com/api/deeplink/info/bf76b0bd-5210-4c55-af23-c9689ffec536/');
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).send(error.message);
  }
});

app.listen(3000, () => {
  console.log('代理服务器运行在http://localhost:3000');
});

然后修改前端的请求地址为你的代理地址，同时纠正代码里的小错误：

getJSON('http://localhost:3000/api/proxy-video-info', function(err, data) {
  if (err != null) {
    alert('Something went wrong: ' + err);
  } else {
    // 注意：要从data里取video对象，你之前的代码漏掉了data前缀
    result.innerText = data.video.name;
  }
});

3. 开发环境临时禁用CORS（仅用于本地调试） #

如果你只是在本地开发测试，可以临时关闭浏览器的CORS限制，但绝对不能用于生产环境，这会带来严重的安全风险。

以Chrome为例，先关闭所有Chrome窗口，再用以下命令启动：

# Windows系统
chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

# Mac系统
open -n -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"

4. 尝试JSONP（如果API支持的话） #

JSONP是一种老旧的跨域方案，只适用于GET请求，且需要目标API支持返回JSONP格式的数据（即把JSON数据包裹在指定的回调函数里）。如果目标API支持，你可以这样修改请求：

function handleVideoData(data) {
  result.innerText = data.video.name;
}

const script = document.createElement('script');
script.src = 'https://dev.truthify.com/api/deeplink/info/bf76b0bd-5210-4c55-af23-c9689ffec536/?callback=handleVideoData';
document.body.appendChild(script);

不过现在CORS是更主流的方案，JSONP只在老项目或特定场景下使用。

内容的提问来源于stack exchange，提问作者Marko Petković