前端跨域

雨点打透心脏的1/2处 2021-09-07 06:09 460阅读 0赞

### 前端跨域 ###

*  一、什么是跨域
 *  二、网址解析：
 *  三、解决跨域
 *   *  1.src
     *  2.jsonp
     *  3.jq中的jsonp
     *  4.jsonp的优化
     *  5.cors

# 一、什么是跨域 #

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

# 二、网址解析： #

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

# 三、解决跨域 #

## 1.src ##

## 2.jsonp ##

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

语法

后台

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.开发跨域  
一把我们解决的跨域都是开发的时候，生产跨域我们只要改接口即可。