前端跨域

一、什么是跨域

跨域就是前端访问后台时，域名，协议，端口有一个不相同时，就会出现跨域，请求不到数据。
ajax也会有跨域。
同源政策一开始是为了防止a网站访问b网站的cookie。
请求是发送出去了，但是浏览器拒绝响应。

二、网址解析：

http://www.baidu.com：80
http://表示传输协议
www.表示服务器
baidu.com表示域名
：80表示端口

三、解决跨域

1.src

2.jsonp

需要前后端配合完成
其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

语法

<script>
   function 方法名(data){
          //data是后台发回来的参数
            console.log(data);
           
        }
        //函数要提前定义好，再发送jsonp，且函数要是全局函数，挂在window下
</script>
<script type='text/javascript' src = '地址?key=方法名'></script>

后台

const = 'fn(数据)'
//接受到fn这个字符串后，再拼接'(数据）'这个字符串即可

发送的是get请求,js使用jsonp只能发送get请求，可以用jq发送post请求。

其实就是把方法名当作key的值，发送给后台，后台在方法名后加();再返回给浏览器，可以在括号里面加参数，但是整个方法必须是字符串的形式，不然会在后台直接调用了。浏览器这时候识别的是方法名();是一个方法调用，就会直接调用这个方法，进行一些操作。浏览器会解析js代码
直接使用即可。

3.jq中的jsonp

$.ajax({
		      url:'地址',
              dataType:'jsonp'.//是必须的，表示发送jsonp请求
              success:function(data){
              //处理接收到的数据
}
			jsonp:'cb'//是用来更改callback这个属性的，一般服务器端接受jsonp的属性是callback，但有的是cb，所以需要重新定义对接的关键字。
            jsonpCallback:'fn'//如果不写这个,默认调用的是success的函数，写了之后会调用这个fn函数，必须已经先定义好，相当于把这个fn传过去了，不写的话jq会随机生成一个函数名。推荐使用success
})

JSONP的优缺点
1.优点
1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；
1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
1.3在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。

2.缺点
2.1它只支持GET请求而不支持POST等其它类型的HTTP请求
2.2它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。
2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的

4.jsonp的优化

动态创建jsonp，可以在想用的使用发送请求

bth.onclick = function(){

 var script = document.createElement('script')
 script.scr = '地址+方法名'//方法名最好动态创建，不要写死
 document.body.appendChild(script )
 //加载完后就删除，不然会有很多script标签，它加载完后就会发送请求了，可以删除。
script.onload = function(){

    document.body.removeChild(script )
}
}

之后要在加载完后，去掉script标签。不然会有很多这个标签,还能封装jsonp函数，动态给window挂在一个全局函数，来使多个jsonp请求互补干扰，保证每次的函数都不干扰。

5.cors

全称是Cross-origin resource sharing,即跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求，客服了Ajax只能同源使用的限制。
要是浏览器发现是跨域请求，
浏览器会在头部加一个origin:自己的域信息，包含协议，域名和端口号。
服务器来根据这个字段来确认是否通过，
但是不管是否通过，服务器都会给浏览器一个响应。
要是服务器端同意请求
就在响应头加一个

Access-Control-Access-Origin：*
//访问-控制-允许-源，可以看作一个白名单，*代表所有，或者指定的地址：http://localhost:3000

浏览器发现这个字段后，就会把数据返回过来。
这样就完成了跨域请求。
主要是服务器端配置
客户端正常发送ajax请求即可。

同源政策是ajax的解决，而服务器之间是没有跨域的，可以直接访问。

四、跨域的分类
1.开发跨域
一把我们解决的跨域都是开发的时候，生产跨域我们只要改接口即可。