同源策略

同源策略最早由Netscape公司提出，是浏览器的的一种安全策略。 同源：协议、域名、端口号必须完全相同。 违背同源策略就是跨域

如我们的网页服务器是a.com的，需要向b.com发送请求，此时就是违背同源策略的，属于跨域请求，因为这两个是不同的服务。
跨域在我们项目中经常出现，因为单台服务器的服务是有上限的，性能是有瓶颈的，所以需要加入更多的服务器来使项目更加流畅、服务更加完善。
Ajax默认是需要遵守同源策略的。

下面我们使用同源策略来创建一个页面，首先，创建一个文件夹，里面新建两个文件。

image.png

其中index存放前端代码，server存放服务端代码。 首先我们先搭建服务端代码

  1. const express = require('express')
  3. const app = express();
  5. app.get('/home',(request,response) => {
  6.     //响应一个页面，__dirname表示当前的绝对路径
  7.     response.sendFile(__dirname + '/index.html');
  8. });
  10. //前端获取数据
  11. app.get("/data",(request,response) => {
  12.     response.send("用户数据");
  13. })
  15. app.listen(9000,()=>{
  16.     console.log("服务已启动，9000端口监听中....");
  17. });

然后我们搭建前端代码。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>首页</title>
  8. </head>
  9. <body>
  10.     <h1>HELLO STUDENT</h1>
  11.     <button>点击获取用户数据</button>
  12.     <script>
  13.         const btn = document.querySelector("button");
  15.         btn.onclick = function(){
  16.             var xhr = new XMLHttpRequest();
  17.               // 由于是满足同源策略的，所以url可以简写
  18.             xhr.open("GET","/data");
  19.             xhr.send();
  20.             //绑定事件
  21.             xhr.onreadystatechange = function(){
  22.                 if (xhr.readyState == 4){
  23.                     if (xhr.status >= 200 && xhr.status < 300){
  24.                         console.log(xhr.response);
  25.                     }
  26.                 }
  27.             }
  28.         }
  29.     </script>
  30. </body>
  31. </html>

此时回到浏览器，属于http://127.0.0.1:9000/home，打开服务端搭建起来的页面，点击按钮获取数据，可以看到浏览器抓取到了包，控制台也可以输出结果。 注意：这里的页面需要使用网址打开，不能使用编译器自带的方式打开网页，不然会无法请求到数据！！

image.png
image.png

那么如何解决跨域问题呢？下面的章节中，将讲述几个方法来解决跨域问题。

JSONP

前几节课讲解axios时，使用的是网络上的axios包，那么我们获取到这个包，是不是我们从当前网页向目标网页的服务器发起一个请求呢？这个请求是不是也是跨域请求呢？

答案当然是是的，网络上获取axios包是https协议的，而我们的网页是file协议的，这必然导致跨域问题，但是为什么浏览器没报错呢？这就是因为script标签本身就具有跨域特性。
image.png
image.png

那么jsonp是什么呢？

  • jsonp是一个非官方的跨域解决方案，纯粹凭借着程序员的聪明才智开发出来的，只支持get请求- 。
  • jsonp就是利用上面那种具有跨域特性的包来发送跨域请求的，如：img、link、script….

那么我们怎么利用jsonp进行跨域请求呢，我们只需要在服务端开启一个端口供script标签进行访问，这个服务端返回的结果必须要是js代码，这样script标签才能正常识别。
可是这样还是不够好，我们可以在前端设置好我们需要对服务端返回的数据进行操作的函数，然后服务端返回的是js的函数调用，参数就是服务端需要返回的数据。
通过这种方式，就可以利用script标签对服务端的数据进行处理。

下面通过一个例子进行演示。 服务端代码：

  1. //省略部分内容
  2. ...
  3. app.get('/jsonp-server',(request,response) => {
  4.     const data = {name:"张三"};
  5.     let str = JSON.stringify(data);
  6.       //这里服务端返回的数据是函数调用，传入的是参数是需要返回的数据
  7.     response.end(`handle(${str})`);
  8. });
  9. ...

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>原理演示</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 200px;
  12.             border: red 1px solid;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="result"></div>
  18.     <script>
  19.         //我们在这里先对服务端返回的数据处理做定义
  20.         function handle(data){
  21.             const result = document.querySelector("#result");
  22.             result.innerHTML = data.name;
  23.         }
  24.     </script>
  25.       //这里获取到服务端的函数调用，调用上方的函数，参数就是服务端数据
  26.     <script src="http://127.0.0.1:8000/jsonp-server"></script>
  27. </body>
  28. </html>

我们此时再打开网页，可以发现，确实是输出了服务端给我们的数据

image.png

JSONP练习

那么我们可以尝试使用jsonp来判断用户输入的用户名是否重复，不过由于这里不讲诉数据库，所以先默认你输入任何内容都是会显示”用户名已存在”。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     用户名：<input type="text" id="username"/>
  11.     <p></p>
  12.     <script>
  13.         //获取input元素
  14.         const input = document.querySelector("#username");
  16.         //声明handle函数
  17.         function handle(data){
  18.             input.style.border = "solid 1px red";
  19.             //修改p标签内容
  20.             document.querySelector("p").innerHTML = data.msg;
  21.         }
  23.         input.onblur = function(){
  24.             //获取用户输入的值
  25.             var username = this.value;
  26.             //向服务端发送请求，判断用户是否存在
  27.             //1.创建script标签
  28.             const script = document.createElement("script");
  29.             //2.设置标签的src属性，如果要传递参数，可以在后面输入?a=10...
  30.             script.src = "http://127.0.0.1:8000/check-username";
  31.             //3.将script标签插入到文档中
  32.             document.body.appendChild(script);
  33.         }
  34.     </script>
  35. </body>
  36. </html>
  1. //省略部分内容
  2. ...
  3. app.get('/check-username',(request,response) => {
  4.     const data = {
  5.         exist:1,
  6.         msg:"用户名已存在！"
  7.     }
  8.     let str = JSON.stringify(data);
  9.     response.send(`handle(${str})`);
  10. });
  11. ...

打开浏览器，可以看到捕获到的包中，返回的结果其实就是一次函数调用。

image.png

jQuery中发送JSONP请求

在jQuery中发送jsonp请求非常简单，只需要使用$.getJSON就行。

首先，我们先制定一个需求，点击按钮，发送jsonp请求，返回的内容打印在div中。

先来制作前端代码。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../../jQuery3.6/jquery-3.6.0.min.js"></script>
  9.     <style>
  10.         #result {
  11.             width: 300px;
  12.             height: 300px;
  13.             border: 1px solid red;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <button>点击使用jQuery发送JSONP请求</button>
  19.     <div id="result"></div>
  20.     <script>
  21.           //绑定单击事件
  22.         $("button").on('click',function(){
  23.               //使用此方法发送JSONP请求，第一个参数是url，第二个参数是对返回数据进行的操作
  24.               //注意：这里url必须要有?callabck=?这个参数，这是固定格式
  25.             $.getJSON("http://127.0.0.1:8000/jquery-jsonp?callback=?",function(data){
  26.                 $("#result").html(`
  27.                     名称：${data.name}<br/>
  28.                     年龄：${data.age}<br/>
  29.                     性别：${data.gender}
  30.                 `)
  31.             })
  32.         })
  33.     </script>
  34. </body>
  35. </html>

再来制作服务端代码

  1. app.get('/jquery-jsonp',(request,response) => {
  2.     const data = {
  3.         name:"张三",
  4.         age:30,
  5.         gender:"男"
  6.     }
  7.     //将数据转换为字符串
  8.     let str = JSON.stringify(data);
  9.     //接受callback参数
  10.     let cb = request.query.callback;
  11.     response.send(`${cb}(${str})`);
  12. })

上面前端代码中说到url中必须要有callback参数，这是为什么呢？ 其实我们前端传递url的时候没有给callback赋值，但是jQuery调用时是为callback赋值了的，赋的值就是后面定义的那个函数，那么我们在服务器代码中，只要接受到这个函数值，在返回数据给前端时，返回这个函数以及传参调用，就可以使用我们的函数了。

image.png
image.png

并且上面的div中也输出了我们服务器传回的值。

image.png

CROS

CROS是什么？
CROS，跨域资源共享。是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务端进行，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

其实前面我们能正常使用Ajax访问服务，都是设置了CROS，下面再来回顾一下服务端使用的方法。

  1. //1. 引入express
  2. const express = require('express');
  4. //2. 创建应用对象
  5. const app = express();
  7. //3. 创建路由规则
  8. app.all("/cros-server",(request,response) => {
  9.       //添加CROS响应头
  10.     response.setHeader("Access-Control-Allow-Origin","*");
  11.       //*号表示所有网站的都可以响应，如果我们只想特定的网页，可以接上对应的url，如
  12.       //response.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:5500");
  13.       //设置允许头信息
  14.     response.setHeader("Access-Control-Allow-Headers","*");
  15.     //设置允许请求的方法
  16.     response.setHeader("Access-Control-Allow-Method","*");
  17.     response.send("HELLO");
  18. })
  20. //4. 监听端口，启用服务
  21. app.listen(8000,()=>{ 
  22.     console.log("服务已经启动，8000端口监听中...");
  23. })

CORS还有许多方式，有需要的可以查看网址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS