创建 API 路由模块( 二 )


解决接口跨域问题的方案主要有两种:
CORS(主流的解决方案,推荐使用)JSONP(有缺陷的解决方案,只能支持 GET 请求) 使用 CORS 中间件解决跨域问题
CORS 是的一个第三方中间件 。通过安装和配置 CORS 中间件,可以很方便地解决跨域问题 。使用步骤分为如下 3 步:
运行 npmcors 安装中间件使用 const cors = (‘cors’) 导入中间件在路由之前调用 app.use(cors()) 配置中间件
安装完 CORS 中间件之后,在 test.js 路由之前导入并配置 CORS 中间件,其代码如下:
// 一定要在路由之前配置 cors 这个中间件,从而解决接口跨域的问题const cors = require('cors')app.use(cors())
实现 JSONP 接口
步骤如下:
获取客户端发送过来的回调函数的名字得到要通过 JSONP 形式发送给客户端的数据根据前两步得到的数据,拼接出一个函数调用的字符串把上一步拼接得到的字符串响应给客户端的
//必须在配置 cors 中间件之前,配置 JSONP 的接口app.get('/api/jsonp', (req, res) => {// TODO:定义 JSONP 接口具体的实现过程// 1、获取客户端发送过来的回调函数的名字const funcName = req.query.callback// 2、得到要通过 JSONP 形式发送给客户端的数据const data = http://www.kingceram.com/post/{name: 'zs', age: 20}// 3、根据前两步得到的数据,拼接出一个函数调用的字符串const scripStr = `${funcName}(${JSON.stringify(data)})`// 4、把上一步拼接得到的字符串响应给客户端res.send(scripStr)})
接下来我们就可以在 html 中调用 $.ajax() ,提供 JSONP 的配置选项来发起 JSONP 请求,其代码如下:
>//为 JSONP 按钮绑定点击事件处理函数$('#btnJSONP').on('click', function() {$.ajax({type: 'GET',url: 'http://127.0.0.1/api/JSONP',dataType: 'jsonp',success:function(res) {console.log(res)}})})