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 + ')');
});

1. 浏览器脚本：利用script可跨域的特性，其src属性和后台地址一样同时传递参数和定义callback
2. 服务器端：输出对callback的调用。

2-2 CORS

• CORS 是一个W3C标准，全称“跨域资源共享”（Cross-origin resource sharing）
• 允许浏览器向不同源的服务器发出XMLHttpRequest请求

2-3 反向代理