02_跨域问题总结

矫情吗；* 2022-09-14 08:39 164阅读 0赞

# 跨域问题总结 #

### 1. 为什么会有跨域这个问题？ ###

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

### 2. 什么是同源策略？ ###

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

备注：规则举例如下(假设已有网站地址为：http://study.cn)  
![Alt text][]

### 3. 没有同源策略的危险场景： ###

危险场景：

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

### 4.非同源受到哪些限制？即：跨域了你不能干那些事情 ###

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

### 5.如何在开发中解决跨域问题： ###

发送get请求的几种方式对比:

1.form — 不受同源策略的限制

2.ajax — 受到同源策略的限制

3.浏览器地址栏 — 不受同源策略的限制

4. <script *src*> — 不受同源策略的限制

**1.JSONP解决发送请求跨域问题：**

> 要明确的是：JSONP不是一种技术，而是程序员“智慧的结晶”（利用了标签请求资源不受同源策略限制的特点）  
> JSONP需要前后端人员互相配合。
> 
> 关于jsonp解决跨域:
> 
>  1.原理：利用了script标签发请求不受同源策略的限制。所以不会产生跨域问题
> 
>  2.套路：动态构建script节点，利用节点的src属性，发出get请求，从而绕开ajax引擎
> 
>  3.弊端：(1) 只能解决get请求跨域的问题。(2) 后端工程师必须配合前端
> 
>  4.备注：有这样一种感觉：前端定义函数，后端“调用”。后端返回的数据，前端以js格式解析，并且运行。

前端页面写法：

<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. 为节点指定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>

jQuery版写法

/* * 1.提前定义好一个等待被调用的函数 2.创建一个script节点 3.为节点指定src地址，同时指定好回调函数的名字 4.将节点插入页面 备注：以上所有步骤，都由jquery底层全部完成 */
    
    // 推荐这种写法
    $('#btn').click(function () { 
    //完整写法
    $.ajax({ 
      url:'http://localhost:3000/test',
      method:'get',
      dataType:'jsonp', //该属性，控制了上面的4步
      data:{ name:'zhangsan',age:18},
      success:function (result) { 
        console.log(result)
      },
      error:function (err) { 
        console.log(err)
      }
    })
    
    //精简写法
    /*$.getJSON('http://localhost:3000/test?callback=?',{name:'zhangsan',age:18},function (data) { console.log(data) })*/
    })

后端写法：

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)})`);
    })

**2.后台配置cors解决跨域**

1) CORS是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。

2) CORS怎么工作的？

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

以Node为例，服务器路由中添加设置：
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:63348');

**3.使用代理服务器**

诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

以Node为例，服务器路由中添加设置：
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:63348');

**3.使用代理服务器**

例如：nginx等

[Alt text]: /images/20220828/f88f6a32978545d1a5bf3c8a12c87b6e.png