跨域的理解

什么是跨域？

当 A 网站去调用 B 网站的数据时，由于浏览器的同源策略 (域名、协议、端口号相同)，跨域访问会受到限制。

解决方案

• JSONP
• CORS

JSONP 的理解：

• JSONP 它不是一个新的技术，更多的是前端与后端的约定；用来实现不同网站之间的数据；
• 主要利用 HMTL 中的 script 标签天生就有跨域能力的特性（动态添加 script 标签）；
• 作为前端要做的是：
  • 需要在全局范围内准备一个函数，用来接收后台传过来的数据；
  • 发送请求，并且将我们在全局范围内准备的函数通过参数的形势传递出去；
• 作为后端要做的是：
  • 接收前台传递过来的函数的名字；
  • 通过各种手段获取数据；
  • 返回前端传递过来的函数的调用，并且将数据通过函数参数的形势传递到前端；
    注意： JSONP只支持 get 请求；

CORS 的理解：

• CORS 请求跨域数据，原理是直接使用 XHR 这个对象，来发起 get 和 post 请求；

• 启用 CORS，需要后端进行特殊的配置，否则前端发起 CORS 类型的 AJAX 请求，后盾处理不了；

• 比如 node 中：

  • 安装 cors 第三方模块；
  • 启用 cors 中间件；

• 在 PHP 中：

  • 后端配置：

  header("Access-Control-Allow-Origin:*");     
  header("access-Control-Allow-Methods: post,get);
  

JSONP 小例子：

通过 360 搜索获取数据；

<input type="text" id="inp">
 <ul id="container"></ul>

// 全局函数
function GetData(data){
    let str = "";
    data.result.forEach(item => {
      str += `<li>${item.word}</li>`;
    });
    
    container.innerHTML = str;

}

let inp = document.querySelector('#inp');
let container = document.querySelector('#container');
    
inp.onkeyup = function(){
    
    let keyword = inp.value;
    
    let script = document.createElement('script');
    
    script.src = `https://sug.so.360.cn/suggest?callback=GetData&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=${keyword}&sid=7824548ceff07a28716d37a1e52da72d&pq=a`;
    
    document.body.appendChild(script);
}