解决接口跨域问题的方案主要有两种:
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)}})})
- node.js中的Express-路由-express中间件
- Node.js:Express( express 路由,express 中间件
- antd-vue a-menu菜单绑定路由相关问题
- 使用Yeoman实现vue项目结构创建
- 创建UI组件库后上传NPM
- 利用新浪微博API的Search接口做微博锐推榜
- 阿皮亚_阿皮亚人口
- angular ui-router:简单的单页面嵌套路由的实现过程
- 基于mediapipe库和pyautogui库 手势识别控制鼠标键盘——计算机
- 千兆网能跑满1000m吗