jquery+ajax+jsonp跨域方法的基本使用

jsonp跨域实现

script，img，iframe标签不受跨域影响，jsonp通过动态生成script标签嵌入到DOM中实现跨域

$.ajax({
    url: 'http://localhost:8081/captcha',
    type: 'get',
    dataType: 'jsonp',
    success: function(res){
        console.log('res ',res)
    },
    error : function(err){
        console.log('err = ',err)
    }
})
// 前端向服务器请求:http://localhost:8081/captcha?callback=jQuery3310015355127565073179_1628082323010&_=1628082323011
//其中callback为默认参数，后面的值为随机值

将dataType设置成jsonp，这个要求服务器返回一段jsonp格式的数据，否则出错：jquery.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response

jsonp格式如下：

函数参数名({
    返回参数
})

jsonp({
    name:'wangwu',
    gender:'man'
})

// 其中jsonp需要改成前端传递的callback的值

jsonp参数使用

通过 jsonp 参数配合 jsonpCallback 参数使用向后端传值

$.ajax({
    url: 'http://localhost:8081/captcha',
    type: 'get',
    dataType: 'jsonp',
    jsonp:'mycallback',
    jsonpCallback: 'receive',
    success: function(res){
        console.log('res ',res)
    },
    error : function(err){
        console.log('err = ',err)
    }
})
//前端向后端请求地址变为Request URL: http://localhost:8081/captcha?mycallback=receive&_=1628091260362
// 通过后端req.query属性获取函数名称，然后做相应操作

后端相应逻辑处理代码

app.get('/captcha', function (req, res) {
    // 修改后的参数，默认为req.query.callback
	callback = req.query.mycallback
    // 调用传入的函数值
	eval(callback+"()")
    //返回前端值{value: 'jsonp' }并组装成jsonp格式
	res.send(`${callback}({ value: 'jsonp' })`);
})

function receive(){
	console.log('i am called')
}

jsonp不支持post方法

post参数放在req.body中，不能通过script标签的src属性传递过去，所以不能通过jsonp方法实现，会自动变成get方法

$.ajax({
		url: 'http://localhost:8081/captcha',
		type: 'post',
		dataType: 'jsonp',
		data:{name:'wangwu',gender:'man'},
		success: function(res){
			console.log('res ',res)
		},
		error : function(err){
			console.log('err = ',err)
		}
	})

// 转变为
//Request URL: http://localhost:8081/captcha?callback=jQuery33100001136600400915011_1628099140585&name=wangwu&gender=man&_=1628099140586
//Request Method: GET