跨域

同源

同源策略是游览器的一种安全策略，同源就是指域名，协议，端口完全相同.
不同源则跨域：不允许进行DOM操作 不能进行ajax请求

跨域

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致

服务器端设置CORS跨域

实现跨域：这种实现方式较少设置，一来服务器端不归前端处理，二来这种限制浏览器版本
服务器端添加响应头

    
// 设置跨域请求    
header("Access-Control-Allow-Origin:*"); // * 允许代表所有域来请求    
header("Access-Control-Allow-Origin:http://day09.com");  //允许指定的域发送请求
echo file_get_contens("nav.json");
?>

jsonp

开发中常用jQuery的jsonp方式来解决跨域问题
原理就是先向后台发送一个请求、然后传递一个自动生成的函数名字，后台把函数做一个相应的接收，接受完得到它的数据，做一个相应的返回，返回调用函数的形式，只不过在这个形式中要传递前台需要的数据。后台在拼接字符串.

通过jQuery实现jsonp的调用

JSONP不支持POST，必须是get请求，所以后端接口无法设计成JSONP的接口
涉及到表单的提交 表单提交一般都是post
步骤1：发送请求的时候设置dataType类型：

$.ajax({
  	type: "get",
  	url: "http://day8.com/getnav.php",
  	dataType: "jsonp",
  	success: function(res) {
      	var html = template("navTemp", {"items": res})
        document.querySelector("ul").innerHTML = html
  	}
})

步骤2：查看jsonp请求
步骤3：服务器端的配合

  	// 这就是客户端请求时传递过来的函数名称
  	$callback = $_GET["callback"];
	// 读取数据
	$data = file_get_contens("nav.json");
	// 返回调用函数的形式，只不过要传递前端需要的数据
	echo $callback."('.$data.')"; // acb()
?>

页面中有几个标签允许跨域请求资源 a链接的href 、 img的src 、link的href 、script的src：都是天然跨域特性.

跨域解决方案

一.JSONP（需要前后端配合），不是ajax请求，不支持post
原理：

1. 创建一个函数test，形参接收服务器返回的值
2. 创建script标签，src属性发送携带?callback=test 参数给服务端，服务端监听到请求后返回函数调用
3. ‘test(服务器返回的数据)’

<script>
  function test(res) {
    console.log(res);
  }
script>

<script src="主机名/xxx?callback=test">script>

二.CORS跨域资源共享，支持Ajax请求，支持get, post
条件：

1. 官方的浏览器跨域解决方案
2. 浏览器和服务器都需要支持CORS
3. 关键在于服务器设置好CORS后，浏览器就可以跨域访问了

node中使用CORS

//1.安装模块  cnpm i cors -S

//2.导入模块
const cors = require('cors');

//3.注册模块
app.use(cors())

JSONP和CORS的区别：
一.JSPON原理：动态创建script标签

                        - JSONP发送的不是Ajax请求
                        - 不支持Post请求

二.CORS是跨域资源共享，需要服务器端进行cors配置
- cors发送的是真正的Ajax请求
- cors支持Ajax的跨域
- 如果想启用cors跨域资源共享，关键在于服务器端，只要服务器端支持cors资源跨域共享，则浏览器肯定能正常访问这种cors接口，而且客户端在发送Ajax的时候，就像发送普通Ajax一样，没有任何代码上的变化.
三.对于node来说 想要开启cors跨域通信，只需要安装cors模块即可.