解决跨域的九种方法

同源策略请求：同源是浏览器的概念，指 协议，域名，端口号相同。 ajax（异步无刷新） / fetch

前后端分离导致跨域（非同源策略请求）

• 前端：web服务器，请求资源文件 , 资源服务器：图片，音视频
• 后端：数据服务器，处理业务逻辑和数据接口

一、jsonp

原理：基于script 标签 src属性 ，发送请求时，把本地函数作为回调函数传递给服务器，服务端接收并返回处理完成的数据，浏览器接收到响应数据，执行该函数。

前端：

<script>
	// 全局函数func
	function func(data){
    // data-服务端返回的数据
		consolr.log(JSON.parse(data));
	}
</script>
//请求后台接口，将函数名作为参数传递给后台。 src不受同源策略的限制
<script src="http://api.qq.com/list?callback=func"></script>

服务器端：

//接收客户端的请求
callback = func
//准备数据
data = {
   ...}
//给客户端返回string类型的数据
'func('+JSON.stringify(data)+')'

缺点：jsonp只能处理get请求。url传递数据可能被劫持（拦截响应），导致数据不安全（可能携带木马程序）不安全；有缓存，大小限制。

jQuery提供（内部封装）了jsonp的处理方式

前端：

$.ajax({
   
	method:'get',
	url:'http://127.0.0.1:8001/list'
	dataType:'jsonp',//添加dataType属性,值为jsonp则执行的是JSONP请求
	success:res=>{
   console.log(res);}
})

服务端：Node+express实现

let express = require('express');
let app = express();
app.listen(8000,()=>{
   console.log("服务器启动...")}