20 跨域的解决方法

最新推荐文章于 2024-06-05 00:40:27 发布

_wayliu

最新推荐文章于 2024-06-05 00:40:27 发布

阅读量161

点赞数

分类专栏：解锁前端面试体系核心攻略

本文链接：https://blog.youkuaiyun.com/weixin_44499465/article/details/115367128

版权

解锁前端面试体系核心攻略专栏收录该内容

20 篇文章

订阅专栏

1.什么是跨域

2.跨域解决方案

1.什么是跨域

即同源策略：

源：指的是协议、域名和端口号
同源：指协议、域名和端口号都相同
同源策略：浏览器的一个安全功能，不同源的脚本在不能读写对方的资源
Cookie、LocalStorage和IndexDB 无法读取
DOM 和 JS 对象无法获取
Ajax 请求发送不出去

2.跨域解决方案

2-1 JSONP

客户端：

<button id="btn">点击</button>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#btn').click(function(){
			var frame = document.createElement('script');
			frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
			$('body').append(frame);
		});
		
		function func(res){
			alert(res.message+res.name+'你已经'+res.age+'岁了');
		}
  </script>

服务器端：

router.get('/article-list', (req, res) => {
  console.log(req.query, '123');
  let data = {
    message: 'success!',
    name: req.query.name,
    age: req.query.age
  }
  data = JSON.stringify(data)
  res.end('func(' + data + ')');
});