ajax json数据跨域

在前端开发中，Ajax 是一个非常重要的技术，它可以在不刷新页面的情况下更新数据。而 JSON 则是一种轻量级的数据交互格式，被广泛应用于前后端数据传输。

然而，在实际开发中，经常会遇到需要跨域传输数据的情况。比如，前端页面部署在 www.example.com，而后端数据接口部署在 api.example.com。如果直接使用 Ajax 请求数据，就涉及到了跨域问题。

为了解决这个问题，我们可以借助 JSONP 或 CORS 技术。其中，JSONP 是一种利用 script 标签加载跨域资源的方式，而 CORS 则是一种跨域资源共享机制。

// JSONP 示例
function handleResponse(res) {
  console.log(res);  // 处理接口返回的数据
}

const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);  // 插入 script 标签，加载跨域资源

// CORS 示例
fetch('http://api.example.com/data',{
  method: 'GET',mode: 'cors',// 设置跨域模式
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => {
  console.log(res.json());  // 处理接口返回的数据
}).catch(err => {
  console.error(err);
});

总之，跨域传输数据是前端开发中普遍存在的问题，我们需要根据具体情况选择合适的解决方案。在实际开发中，还有很多其他技术可以用来处理跨域问题，如反向代理、iframe 嵌套等。