jsonp解决跨域问题

55 阅读1分钟

使用jsonp可以解决跨域问题,但只支持get方式。

前端代码

$('.jsonp').on('click',function(){
  $.ajax({
    method : "GET",
    url : 'http://127.0.0.1:8080/api/jsonp',
    dataType : "jsonp",//表示要发起JSONP的请求
    success : function (res){
        console.log(res)
    }
  })
})

nodejs后端代码


// 为了防止冲突,jsonp接口要在注册cors中间件之前设置
app.get('/api/jsonp', (req, res) => {
  // 1.得到函数名称
  const funcName = req.query.callback
  // 2.定义要发送到客户端的数据对象
  const data = { name: "zs", age: 22 }
  // 3.拼接出一个函数的调用
  const scriptStr = `${funcName}(${JSON.stringify(data)})`
  // 4.把拼接的字符串,响应给客户端
  res.send(scriptStr)
})