vue封装模拟jsonp跨域demo

写在前面：jsonp为跨域请求的一种方式，依托于script的src属性，达到跨域的目的，只能发get请求

什么是跨域？不同的协议，不同的ip，不同的端口，只要是其中的一种都属于跨域请求。 

 首先用node起个服务

serve.js 代码如下

const express = require('express');
const fs = require('fs')
const app = express();
app.get('/call',function(req,res,next){

    res.send("aaa(aaaa)");
})
app.get('/test',function(req,res){
    var data = fs.readFileSync('./config.json').toString();
    if(req.param('name') == 'test'){
        var jsonp = "callback("+data+")";
        res.send(jsonp);
    }
})
var server = app.listen(8081,function(){
    var host = server.address().address
    var port = server.address().port
    console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

读取的文件是个简单的json文件

这里要说明的是，通过jsonp返回的虽然是字符串，但浏览器认为是可执行的js代码，所以需要定义一个函数名（这里是callback） ，在前端调用接口时需要传入: 路由，参数（可空），函数名

封装的处理请求的js文件

var const_url = "http://localhost:8081"
const  inter = function(url,params,funname, callback){
    url = const_url+url
    if(!url) return;
    if(params){
        url +='?'
        for(let index in params){
            url = url +index+'='+params[index]+'&'
        }
        console.log(url)
    }
    var scriptDom = document.createElement('script');
    scriptDom.src = url;
    // 给script绑定个错误处理，如果出错进callback的error处理
    scriptDom.onerror=function(e){
        callback.error(e)
    }
    //正常执行会返回数据，这里直接执行返回的js代码
    window[funname] = function(str){
        callback.success(str);
        delete window[funname]
    }
    document.body.appendChild(scriptDom);
}
export default inter;

 接口有4个参数，url：请求接口的路由；  params：参数；funname:后端定义的js执行函数名；callback：函数回调

vue组件调用封装js文件：

直接导入接口文件

import inter from '../request/request'

在button上绑定click事件调用函数，函数调用如下：

 getdate(){
            // window.aaa = function(str){
            //     console.log(str)
            // }
            // var scriptDom = document.createElement('script');
            // scriptDom.src = "http://localhost:8081/call";
            // document.body.appendChild(scriptDom);
            inter("/test",this.params,"callback" ,{
                success: function (res) {
                    console.log(res)
                },
                error: function (e) {
                    console.log(e)
                }
            })
            
        }

 参数是：

params:{ name:"test",age:12},

请求结果如下：

 

js动态加载：https://blog.youkuaiyun.com/h774140913/article/details/87968123

jsonp知识点：https://blog.youkuaiyun.com/hansexploration/article/details/80314948