突破边界：理解同源策略与CORS解决跨域-优快云博客

本文链接：https://blog.youkuaiyun.com/NumbSilver/article/details/117113801

跨域问题

同源策略&跨域

同源策略：浏览器的一种安全策略。
同源：协议（http/https）域名端口号必须完全相同。
违背同源策略就是跨域
跨域：跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

非同源收到那些限制：

cookie不能获取
DOM无法获取
Ajax请求不能获取数据

jsonp解决跨域（只支持get请求）

jsonp的原理：

利用就是利用script标签没有跨域限制，可以通过script标签的src属性发送GET请求。
通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

实现步骤：

在前端预先定义好一个带参数的函数用来接受后端传来的数据。
在后端启动一个server服务，将要传的数据以定义好了的函数名加上返回结果的方式传给前端。
利用script标签自动解析函数获取数据

jsonp的使用

动态的创建一个script标签

var script = document.createElement("script")

设置script的src,设置回调函数

script.src = document.createElement("script")

将script添加到Body中
服务器中路由的处理

自定义jsonp

myJsonp = function(url,data,callback){
            
    var fnName = 'myJsonp_' + Math.random().toString().replace('.','');
    
    //定义一个全局回调函数
    window[fnName] = callback;
    
    //初始化序列化参数
    var querystring = '';
    for(var attr in data){
        querystring += attr + '=' + data[attr] + '&';
    }
    //动态创建script标签
    var script = document.createElement('script');
    //后台接受回调函数，并调用
    script.src = url + '?' + querystring + 'callback=' + fnName;
  
    //处理完毕之后,删除script标签，否则多次请求，页面会存在多个script标签
    script.onload = function(){    
        document.body.removeChild(script);
    }
    
    document.body.appendChild(script);
}

CORS

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
特点：

客户端不需要任何特殊操作，完全在服务器中处理
支持get&post请求

如何工作：

设置响应头告诉浏览器，该请求允许跨域。浏览器收到该响应以后就会对响应放行。

// 主要是在服务器端的设置
router.get({"",function(req,res){
		// 通过res来设置响应头，来允许跨域请求,*可以换成任何路径
		res.set("Access-Control-Allow-Origin":"*");
		res.send("testAJAX返回的响应")
	}
})