2.AJAX跨域问题

最新推荐文章于 2024-11-02 12:42:04 发布

美美| ू•ૅω•́)ᵎᵎᵎ

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量186

点赞数 1

分类专栏： ajax\promise\axios 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/lazylYYY/article/details/120396393

版权

ajax\promise\axios 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一：为什么会有跨域这个问题？

原因是浏览器为了安全，而采用的同源策略（Same origin policy）

二：什么是同源策略？

1. 同源策略是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
2. Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
3. 所谓同源是指：协议，域名（IP），端口必须要完全相同。
即：协议、域名（IP）、端口都相同，才能算是在同一个域里。

三：没有同源策略的危险场景：

危险场景：

有一天你刚睡醒，收到一封邮件，说是你的银行账号有风险，赶紧点进www.yinghang.com改密码。你着急的赶紧点进去，还是熟悉的银行登录界面，你果断输入你的账号密码，登录进去看看钱有没有少了，睡眼朦胧的你没看清楚，平时访问的银行网站是www.yinhang.com，而现在访问的是www.yinghang.com，随后你来了一条短信，钱没了，这个钓鱼网站做了什么呢？大概是如下思路：

<iframe id="baidu" src="https://www.baidu.com"></iframe>   //旧版本，现在不用了

<script type="text/javascript">
  const iframe = window.frames['baidu']
  const inputNode = iframe.document.getElementById('输入敏感信息的input的id')
  console.log(inputNode.value)
</script>

四：非同源受到哪些限制？

1. Cookie不能读取；
2. DOM无法获得；
3. Ajax请求不能获取数据

五：跨域问题解决：

1.jsonp绕开xhr，借助script标签发请求，不受同源策略的限制，（前端定义函数，后端调用函数的感觉）

html

<body>
	  <button id="btn">按钮</button>
	  <script type="text/javascript">
	    var btn = document.getElementById('btn');
	    btn.onclick = function () {
	      //1. 创建一个script标签
	      var script = document.createElement('script');
	      //2. 设置回调函数
	      window.getData = function (data) {
	        console.log(data);//拿到数据
	      }
	      //3. 设置script标签src属性，填写跨域请求的地址
	      script.src = 'http://localhost:3000/jsonp?callback=getData';
	      //4. 将script标签添加到body中生效
	      document.body.appendChild(script);
	      //5.不影响整体DOM结构，删除script标签
	      document.body.removeChild(script);
	    }
	  </script>
	</body>

app.get('/jsonp', (req, res) => {
  //解构赋值获取请求参数
  const {callback} = req.query
  //去数据库查找对应数据
  const data = [{name: 'tom', age: 18}, {name: 'jerry', age: 20}];
  res.send(callback + '(' + JSON.stringify(data) + ')');
})