JS 跨域

198 阅读2分钟

今天记录一下前端的跨域的问题,如果有写的不对的地方,欢迎各位留言,谢谢!

跨域是由浏览器产生的

当我们在网页上进行http请求时,浏览器会对服务器返回的请求头进行验证,也就是“Access-Control-Allow-Origin”(同源验证),如果结果中包含当前的 协议+IP+端口,就视为可以跨域。而如果是通过服务A请求服务B的接口,就不会有这个验证,所以说跨域是浏览器产生的。

注:协议+IP+端口 都相同时为同源,其余都不是

下面展示几种跨域的方法

1、JSONP

jsonp是一种前端实现跨域的手段,基于script标签不会进行同源验证的原理,实现跨域。

jsonp比较古老,所以不会有兼容性的问题。但是这种方式也存在很多的限制。

首先,接口必须支持的 get 请求,其次,因为这种方法需要一个回调函数进行参数的接收,所以请求时一般都会传入一个 callback,所有接口必须取到这个参数并返回函数调用的形式,比较麻烦。

2、cors同源

cors同源是值服务端修改自己的请求头,修改“Access-Control-Allow-Origin”的值,使其包含当前的地址或者为*(*代表着全部网址都可以请求,会带来一些安全性的问题)。

这种方式是需要服务端进行配置,并不是前端自己的配置解决的。所以我觉得只是解决跨域的一种方式,而不是只属于前端跨域的方式

3、服务代理

这种方式,常见于vue等框架中,原理是利用服务与服务的通信不会产生跨域。

当vue服务启动后,你在访问路由页面时,访问的就是vue的服务了,在配置后进行代理请求,就是vue服务和服务器接口通信了,所以就不会有跨域了。

nginx启动打包后的vue服务进行的请求代理,也是利用服务与服务的通信不会产生跨域的原理。

目前我了解到的常用的就是这三种方式,如果有更好的解决方法,欢迎留言!!!

求赞!!!谢谢!!!