关于跨域,你想知道的全在这里

时间:2022-01-08 来源:未知网络 作者:996建站网

想学习更多前端或编程知识,欢迎关注专栏:敲代码,学编程 – 知乎专栏

阅读本文前,希望你有一定的 JS/Node 基础,这里不另外介绍如何使用 ajax 做异步请求,如果不了解,可以先看:

Ajax 知识体系大梳理 – 掘金

最近在面试的时候常被问到如何解决跨域的问题,看了网上的一些文章后,发现许多文章都没有写清楚明白,使读者(我)感到困惑,所以今天我整理了一下常用跨域的技巧,写这篇关于跨域文章的目的在于:

  1. 介绍常见的跨域的解决方法以及其优缺点
  2. 模拟实际的跨域场景,在每种方式后都会给出一个简单实例,你只要跟我做一起敲代码,就更加直观地理解这些跨域的技巧

这篇文章的所有代码我放在了 happylindz/blog Github 上,建议你 clone 下来,方便你阅读代码,跟我一起测试。

后面代码的测试环境:不考虑跨域的兼容性问题,旨在理解其思想

  • Mac os
  • Chrome 54+
  • Node 6.8.1+

同源策略:

使用过 Ajax 的同学都知道其便利性,可以在不向服务器提交完整的页面的情况下,实现局部更新页面。但是浏览器处于对安全方面的考虑,不允许跨域调用其他页面的对象,这对于我们在注入 iframe 或是 ajax 应用上带来不少麻烦。

简单说来,只有当协议,域名,端口相同的时候才算是同一个域名,否则均认为需要做跨域的处理。

关于跨域,你想知道的全在这里插图跨域方法:

今天一共介绍七种常用跨域的方式,关于跨域大概可以分为 iframe 的跨域和纯粹的跨全域请求。

下面就先介绍三种跨全域的方法:

1. JSONP:

只要说到跨域,就必须聊到 JSONP,JSONP全称为:JSON with Padding,可用于解决主流浏览器的跨域数据访问的问题。

Web 页面上调用 js 文件不受浏览器同源策略的影响,所以通过 Script 便签可以进行跨域的请求:

  1. 首先前端先设置好回调函数,并将其作为 url 的参数。
  2. 服务端接收到请求后,通过该参数获得回调函数名,并将数据放在参数中将其返回
  3. 收到结果后因为是 script 标签,所以浏览器会当做是脚本进行运行,从而达到跨域获取数据的目的。

实例:

后端逻辑:

//server.js
const url = require('url');
	
require('http').createServer((req, res) => {

    const data = {
	x: 10
    };
    const callback = url.parse(req.url, true).query.callback;
    res.writeHead(200);
    res.end(`${callback}(${JSON.stringify(data)})`);

}).listen(3000, '127.0.0.1');

console.log('启动服务,监听 127.0.0.1:3000');

关于跨域,你想知道的全在这里插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序