JavaScript原生跨域-记录

数据聚合
前端线上CDN加速

1、jsonp跨域

** 此跨域只支持get请求

1-1、script标签写法

代码段中使用的是聚合数据测试接口，key需要自己申请个免费的就行

window.onload=function(){
	// jsonp跨域
	var scripts = document.createElement("script");
	scripts.src ="http://v.juhe.cn/todayOnhistory/queryEvent.php?date=3/30&key=*****&callback=process";//callback回调函数
	document.head.appendChild(scripts);
	// 及时删除，防止加载过多的JS
	document.head.removeChild(scripts);
}
process=(data){
//返回数据
	console.log(data);
}

1-2、jquery-Ajax写法

window.onload=function(){
	$.ajax({
          type: "get", //
          url: "http://v.juhe.cn/todayOnhistory/queryEvent.php",
          dataType: "jsonp", //jsonp跨域请求只支持get
          data: {
            date: "3/30",
            key: "****",
          },
          //成功回调
          success: function (data) {
          //返回数据
            console.log(data);
          },
          //失败回调
          error: function (err) {
            console.log("err=", err);
          },
        });
}

2、需要后端处理的跨域

参考：https://blog.youkuaiyun.com/qq_42815251/article/details/82120072

链接：react框架下前端跨域+打包后Nginx设置跨域