前端跨域解决方案

最新推荐文章于 2023-06-29 18:08:55 发布

Where-to-go

最新推荐文章于 2023-06-29 18:08:55 发布

阅读量369

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_45523183/article/details/102683247

版权

跨域的方式

JSONP

原理：

JSONP（JSON with padding）的原理是利用了script标签的src属性不受浏览器的同源策略限制，来进行数据请求的。

步骤：

前端发送请求，发出的数据为输入框中的内容，并确定了回调函数的名称

$('input').keyup(function(){
	let wd = $(this).val();
	getList(wd);
})
function getList(wd) {
	let script = document.createElement('script');
	script.id = 'jsonp';
	script.src = 'http://suggestion.baidu.com/su?wd='+ wd +'&cb=getData'
	document.body.appendChild(script);
}

后端接收并返回响应的数据
- JSONP的跨域方案需要服务端进行协助，服务端拿到传递过来的关键字，进行处理并整理出来数据，以url中回调函数的参数返回给前端
前端对响应的数据进行处理，处理之前可以先删除原先创建的script标签

function getData(data) {
	let script = document.querySelector('#jsonp');
	script.parentNode.removeChild(script);
	$('ul').html('');
	for (var i = 0 ; i < data.s.length ; i++) {
	$('<li>' + data.s[i] + '</li>').appendTo('ul')
	}
}

缺点：

因为script标签是引入资源型的标签，仅支持GET请求，所以JSONP格式的跨域方式也只支持GET请求
因为是GET请求，所以传输数据靠的是url进行传递，对于数据的安全具有不可靠性

CORS跨域资源共享

原理：需要服务端支持
步骤：

服务端设置相关的头信息（需要处理options试探性请求）

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "http://localhost:8000");
    res.header("Access-Control-Allow-Credentials", true);
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length,Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,HEAD,OPTIONS");
    if (req.method === 'OPTIONS') {
        res.send('OK!');
        return;
    }
    next();
});