关于JS跨域访问介绍

小鱼儿 2024-03-26 11:21 15阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是JS跨域访问如何实现跨域访问

>什么是跨域？ A网站想要获取B网站服务器上的资源，网站通过[AJAX][]发送请求的时候，本地服务器地址与请求地址、协议类型（http）、IP地址（域名）、端口，三者有其一

逃离我推掉我的手/ 2024年04月01日 14:30/ 0 赞/ 42 阅读

相关关于JS跨域访问介绍

![bdcbe20a45f6e6096869c57e1a4db766.jpeg][] >什么是跨域？ A网站想要获取B网站服务器上的资源，网站通过[AJAX][]发送请求的

一时失言乱红尘/ 2024年04月01日 12:45/ 0 赞/ 26 阅读

相关关于JS跨域访问介绍

![98631c913d8a5d2dcacc33edea62fc03.jpeg][] >什么是跨域？ A网站想要获取B网站服务器上的资源，网站通过AJAX发送请求的时候，本

小鱼儿/ 2024年03月26日 11:21/ 0 赞/ 16 阅读

相关跨域--介绍

原文网址：[跨域--介绍\_IT利刃出鞘的博客-CSDN博客][--_IT_-CSDN] 其他网址 > [彻底理解浏览器的跨域 - 掘金][-] 什么是跨域跨

缺乏、安全感/ 2022年11月29日 11:26/ 0 赞/ 26 阅读

相关关于js跨域请求的问题

在工作中并没有使用过跨域，因为没有和第三方应用合作，不需要去不同的域调取数据供客户端使用。但是在学习的时候还是对跨域做了一下了解。而且在网上发现了一篇很详细的文

雨点打透心脏的1/2处/ 2022年07月29日 06:26/ 0 赞/ 167 阅读

相关 js 设置header，实现跨域访问

[js 设置header，实现跨域访问 ][js _header_] 标签： [ js跨越自定义header][js_header] 2016-04-21 09:49

叁歲伎倆/ 2022年07月14日 22:40/ 0 赞/ 713 阅读

相关跨域与跨域访问

转自：http://blog.csdn.net/notechsolution/article/details/50394391 什么是跨域跨域是指从一个域名的网页

淡淡的烟草味﹌/ 2022年06月14日 09:26/ 0 赞/ 331 阅读

相关其他：js实现跨域访问

转自：[点自这里][Link 1] javascript跨域访问是web开发者经常遇到的问题，什么是跨域，一个域上加载的脚本获取或操作另一个域上的文档属性，下面将列出三种实

电玩女神/ 2022年05月21日 13:45/ 0 赞/ 179 阅读

相关关于跨域

1、跨域问题只存在浏览器中，主要是浏览器厂商定义的，如果用postman或者java等程序发起连接请求，则不存在跨域问题； 2、关于跨域的问题的解决方案，网上的大致相同，以j

- 日理万妓/ 2022年05月16日 01:57/ 0 赞/ 226 阅读

相关跨域访问

首先跨域是什么,顾名思义,就是浏览器的js从一个网站到另一个网站的访问(大概意思). 那么跨域问题就是指浏览器阻止了这样的一个跨域的访问(包括对后端数据的任何操作),这里浏

古城微笑少年丶/ 2022年04月22日 00:10/ 0 赞/ 296 阅读