关于JS跨域访问介绍 小鱼儿 2024-03-26 11:21 8阅读 0赞 ![98631c913d8a5d2dcacc33edea62fc03.jpeg][] **>什么是跨域?** A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址、协议类型(http)、IP地址(域名)、端口,三者有其一不同都称之为跨域请求资源。 **>为什么要有跨域限制?** 通过上面的解释不难发现,跨域限制主要是出于对用户安全的考虑。 因为每一次的HTTP请求,都会附带该请求地址对应的cookie信息,那么就可以做以下攻击: 1、用户登录某银行网站A,该网站在用户电脑上设置cookie信息。 2、用户打开恶意网站B,该网站也向网站A发送AJAX请求,该请求会验证网站A对应的cookie信息,因为已经登录过一次。 3、银行验证到用户cookie无误,response响应用户数据,此时用户数据就泄露给网站B的服务器了。 有了跨域限制,上面的情况就可以得到控制,上网也就更加安全。 **>如何实现跨域?** 一般有下面两种最常用的方式。 CORS cors是一个W3C制定的跨域标准,全称是:Cross-origin resource sharing,这句话的含义就是跨域资源共享,这种方式主要应用在服务端。 他是通过设置服务端设置一个HTTP头:setHeader("Access-Control-Allow-Origin", "\*") 如果Access-Control-Allow-Origin中有A,或者是通配符\*,浏览器就会允许A跨域,通配符代表任何地址都能跨域。 客户端不需要作任何设置,还是按照AJAX请求一样,这样就能获取跨域资源。 JSONP jsonp是通过script标签的src属性,我们都知道src属性能获取同一个ip服务器上,不同文件夹的文件,它其实就是一个HTTP请求,而且它支持跨域,不需要服务端设置直接就能跨域获取资源。 实际操作: 1、先定义一个函数,通过参数来接收数据,后端用参数来设置回调。 <script type="text/javascript"> function toData(data)\{ console.log(data); \} </script> 2、然后利用script标签发送一个请求,需要把回调函数的名字传到后端。 <script src="[" target="\_blank">http://127.0.0.1:8080/user?callback=toData&name=Bill"></script>][target_blank_http_127.0.0.1_8080_user_callback_toData_name_Bill_script] 3、服务器通过该接口,拿到回调函数的名字,把它拼接成一个回调函数,再通过字符串的方式传到前端。 if(url=="/user")\{ response.end(\`$\{GET.callback\}($\{json\})\`); \} 明白到上面的原理,你就知道为什么jsonp不能发送post请求了~,这也是跨域请求最常用的方式。 服务端代理 直接通过服务端发送HTTP请求,服务端没有跨域限制,因为跨域不同源限制只是针对浏览器,服务端请求到数据后再发送到客户端。 来源:[https://www.weidianyuedu.com][https_www.weidianyuedu.com] [98631c913d8a5d2dcacc33edea62fc03.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/15aa49fb2b2d4ea3871765ee6871cf5c.png [target_blank_http_127.0.0.1_8080_user_callback_toData_name_Bill_script]: http://127.0.0.1:8080/user?callback=toData&name=Bill [https_www.weidianyuedu.com]: https://www.weidianyuedu.com
还没有评论,来说两句吧...