谈谈跨越

南山隐士 2022年06月25日 21 0

跨越指的就是违背了浏览器的同源策略,只要协议、域名、端口有任何一个不同,就会产生跨越了

jsonp进行跨域

这个是利用原生的script标签天然可以跨越的特性进行跨越请求

就比如我们平常引入cdn链接一样,其他它就存在跨越了

所以我们就可以通过script来解决跨域的问题

document.getElementById('btn').onclick = function () {
    // 1. 创建script标签
    const script = document.createElement('script');
    // 2. 设置script标签的src属性。 向指定地址发送请求
    script.src = 'http://localhost:3000/jsonp?callback=getDataCallback';
    // 3. 设置请求成功的回调函数. 函数必须全局的函数
    window.getDataCallback = function (data) {
      console.log(data);
    };
    // 4. 将script标签添加到页面上生效
    document.body.appendChild(script);
}

我们可以看到创建了一个script标签,src值就是我需要跨越的地址,并且传对应的参给服务器,参数的值是一个函数的名称,对应的我们也需要在全局当中创建一个函数

而服务器当中呢,需要在其内部接受我的函数名,然后在其内部声明调用该函数,传入对应的实参(数据),把这个过程返回给浏览器,浏览器刚好有这个函数,然后就会触发了,当函数执行,我就可以在其内部通过实参(数据)执行相应的逻辑代码了

app.get('/jsonp', (req, res) => {
  const { callback } = req.query; // 拿到浏览器给我的函数名
  const data = {name: 'yaojin', age: 18};// 最后需要返回给浏览器对应的数据

  const result = `${callback}(${JSON.stringify(data)})`;  // 执行该函数
  res.end(result); // 把这个执行过程返回给浏览器
});

cors进行跨越

cors实现跨域的主要思想就是自定义HTTP头部让浏览器和可以和服务器进行沟通,设置响应头为Access-Control-Allow-Origin,这样就可以发送跨越的ajax请求了

Last Updated: 2022/06/25 18:58:51
谈谈this 的指向 什么是原型链?