学习AJAX必知必会（4）~同源策略、解决跨域问题（JSONP、CORS）

一、同源策略(Same-Origin Policy)，是浏览器的一种安全策略.

1、同源（即url相同）：协议、域名、端口号 必须完全相同。（请求是来自同一个服务）

2、跨域：违背了同源策略，即跨域。

3、ajax请求是遵循同源策略的。

■ 同源请求例子（在浏览器访问127.0.0.1:9000/server-orign，然后点击按钮发送同源请求）：

• 服务端对同源请求处理：

  //3、创建路由规则(request 是请求的报文，response是响应的报文)
  域名(\'/server-orign\', (request, response) => {
      //响应一个页面
      域名File(__dirname + \'/同源策略.html\');
  });
  域名(\'/data\', (request, response) => {
      //响应数据
      域名(\'服务端返回的数据\');
  });
  

• 客户端html：

      const btn = 域名lementsByTagName(\'button\')[0];
      域名ick = function () {
          //域名(\'测试\');
          //发送ajax请求
          const xhr = new XMLHttpRequest();
          域名(\'GET\', \'/data\');//同源请求，路径可以简写
          域名();
          域名adystatechange = function () {
             if(域名yState === 4){
                 if(域名us >= 200 && 域名us < 300){
                     域名(域名onse);
                 }
             }
          }
      }
  

二、解决跨域（JSONP、CORS）

1、非官方解决途径JSONP：

（1) JSONP 是什么？

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，只支持 get 请求。

（2) JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签

利用script的路径src作为请求路径，然后只需要服务端返回的数据封装成js代码即可

■ jsonp例子1：

• 服务端处理，响应返回js代码（跟咱平时引入外部的js代码一样啦）：

域名(\'/jsonp\', (request, response) => {
    //响应数据
    域名(\'域名("hello jsonp")\');
});

• 客户端处理：

<script src="http://127.0.0.1:9000/jsonp"></script>

■ jsonp例子2（验证用户名，显示密码）：

• 服务端处理：

  //服务端验证用户名
  域名(\'/check\', (request, response) => {
      //响应数据
      // 域名(\'域名("hello jsonp")\');
      const data = {
          name:\'admin\',
          password:\'123456\'
      };
      let str = 域名ngify(data);
      域名(`handle(${str})`);//调用客户端（前端）的handle方法
  });
  

• 客户端处理：

    用户名: <input type="text" name="name"/>
    <p></p>
  
    <script>
      const input = 域名lementsByTagName(\'input\')[0];
      const p = 域名ySelector(\'p\');
  
      //声明一个handle函数，用来给服务端调用，以处理服务端返回的数据
      function handle(data) {
          域名er = "solid 1px #f00";
          let username = 域名e;
          //若用户名正确，将服务端返回的数据显示到p标签内
          if(username === 域名){
              域名rHTML = 域名word;
          }
      }
  
      域名ur = function () {
          //向服务端发送请求(jsonp)，检查用户是否存在
          const script = 域名teElement(\'script\');
          //设置script标签的src为ajax的url
          域名 = \'http://127.0.0.1:9000/check\';
          //在界面生成dom元素
          域名ndChild(script);
      }
  </script>
  
  

❀ jsop跨域访问第三方接口，请求成功，但是却拿不到数据？

从上面的例子可以看到当服务端是第三方（例如访问百度的快递接口：https://域名/express/api/express），
通过jsonp跨域方式去访问第三方接口，结果：请求成功，状态码是200，但是无法拿到响应的数据

（ 原因1：第三方服务在创建路由规则时，设置不允许跨域访问，所以提示CORB，无法直接拿到数据；
原因2：想通过script标签的 src=\'请求url\' 引入服务端响应回来的js代码，但是且不知道第三方服务端响应时是怎么书写的，不知道回调了什么函数

总结：jsonp 解决跨域访问，除了类型是GET，还需要服务器的配合才能完成跨域 ）

□ 咱自己的服务端没设置允许跨域访问，默认为不允许跨域访问

□ 但是咱设置了在服务端设置请求时响应回去一些js代码（handle函数的调用（data的json对象作为参数）的js代码）

□ 在客户端咱通过 src=\'请求url\' 引入服务端响应回来的js代码，而咱知道咱服务端响应回来一个handle函数的调用，所以咱在客户端定义了一个handle回调函数（handle函数的参数是响应回来的json格式的数据）。

2、官方解决途径CORS：

（1）CORS: Cross-Origin Resource Sharing 跨域资源共享, 即服务端设置响应头是允许跨域的

（2）CORS的更多介绍：跨源资源共享（CORS） - HTTP | MDN (域名)

• 服务端cors跨域请求处理：

  域名(\'/cors\', (request, response) => {
      //设置响应头（允许跨域）
      域名eader(\'Access-Control-Allow-Origin\', \'*\');
      // 域名eader(\'Access-Control-Allow-Origin\', \'http://127.0.0.1:9000);
  
      //设置响应头（允许自定义请求头）
      域名eader(\'Access-Control-Allow-Headers\', \'*\');
      //设置响应头（允许自定义请求方式）
      域名eader(\'Access-Control-Allow-Method\', \'*\');
  
      //设置响应体
      域名(\'hello cors\');
  });
  

• 客户端处理：

  <button>点击发送ajax请求</button>
  
  <script>
      const btn = 域名lementsByTagName(\'button\')[0];
      域名ick = function () {
          const xhr = new XMLHttpRequest();
          域名(\'get\', \'http://127.0.0.1:9000/cors\');
          域名();
          域名adystatechange = function () {
              if(域名yState === 4){
                  if(域名us >= 200 && 域名us < 300){
                      域名(域名onse);
                  }
              }
          }
      }
  </script>