JavaScript跨域调用基于JSON的RESTful API

下面为您详细讲解“JavaScript跨域调用基于JSON的RESTful API”的完整攻略。

一、什么是跨域调用？

跨域调用指的是在浏览器端，由于安全限制，JavaScript无法直接请求不同域名、不同端口号或不同协议的数据资源。比如，我们的网站a.com无法直接通过JavaScript获取b.com的数据资源。

二、解决跨域调用问题的方法

在我们解决跨域调用的问题之前，先了解一下JSON和RESTful API的相关概念：

1. JSON

JSON是JavaScript Object Notation的简称，是一种轻量级的数据交换格式。JSON数据在JavaScript中的内部表示就是一个对象，可以方便地进行解析和操作。

2. RESTful API

RESTful API指的是符合REST（Representational State Transfer）设计原则的API。RESTful API的核心设计思想是将FUC（Create）、Read（Retrieve）、Update与Delete（Delete）四个操作，对应于HTTP协议中的POST、GET、PUT、DELETE四个方法。一般情况下，RESTful API的资源在服务器上都是以JSON格式存储的。

了解了JSON和RESTful API的相关概念之后，我们可以采用以下两种方法解决跨域调用问题：

1. JSONP跨域调用

JSONP（JSON with Padding）利用script标签的src属性不受同源限制的特性，可以通过在URL中添加一个callback参数的方法，实现跨域调用。具体过程如下：

1. 后台针对需要访问的API，编写一个返回JSONP格式数据的函数，该函数应该有一个参数，这个参数是一个回调函数，需要在函数返回时作为参数进行调用；
2. 前端发起请求，将该回调函数名传递给后台，后台将数据和该回调函数名作为参数拼装成一个JS文件，返回给前端；
3. 前端通过解析返回的JS文件，从中获取数据并执行回调。

下面是JSONP跨域调用的示例代码：

//后台代码（假设API路径为http://b.com/getinfo.php）
function getInfo(callback){
  //获取数据，并返回一个执行回调的JS文件
  var data = {name:"张三",age:22};
  var result = callback+"(" + JSON.stringify(data) + ")";
  return result;
}

//前端代码（假设前端请求路径为http://a.com/myapp.html）
//定义回调函数
function myCallback(data){
  console.log(data.name); //获取数据并输出，控制台输出"张三"
}
//动态创建script标签，发送请求
var script = document.createElement("script");
script.src = "http://b.com/getinfo.php?callback=myCallback";
document.body.appendChild(script);

2. CORS跨域调用

CORS（Cross-Origin Resource Sharing）是一种跨源资源共享的解决方案，与JSONP相比，它更加规范化，更易于控制和定制，相对更为安全。相比于JSONP需要在服务端进行特定的封装，CORS则需要在服务端进行特定的配置。

我们以使用Node.js的Express框架作为例子，来说明如何在服务端进行CORS配置。在Express中，可以使用cors中间件来实现CORS的跨域请求控制。具体过程如下：

1. 在Express中安装并引入cors中间件；
2. 添加cors中间件到Express应用中，并配置allow代表接受跨域请求的源站；
3. 在客户端中，通过XMLHttpRequest对象发送CORS跨域请求。

下面是CORS跨域调用的示例代码：

//后台代码（假设API路径为http://b.com/getinfo）
const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors({
  origin: ['http://a.com'] //允许a.com跨域访问
}))

app.get('/getinfo', (req, res) =>{
  var data = {name:"张三",age:22};
  res.send(data);
})

app.listen(3000, () => {
  console.log('Server listening on port 3000!')
})

//前端代码（假设前端请求路径为http://a.com/myapp.html）
var xhr = new XMLHttpRequest();
xhr.open('GET',"http://b.com/getinfo");
xhr.withCredentials = true; //设置带cookieo
xhr.onload = function() {
  console.log(xhr.response); //结果为{name:"张三",age:22}
};
xhr.send();

在CORS中，我们可以使用XMLHttpRequest对象发送跨域请求。需要注意的是，在发送CORS跨域请求前，需要使用withCredentials属性设置请求带上cookie。此外，如果需要发送post等非get请求，需要使用setRequestHeader()方法设置Content-Type等请求头信息。

至此，就完成了JavaScript跨域调用基于JSON的RESTful API的完整攻略。