摘要:为什么会存在跨域问题同源策略由于出于安全考虑,浏览器规定不能操作其他域下的页面,不能接受其他域下的请求不只是,引用非同域下的字体文件,还有引用非同域下的图片,也被同源策略所约束只要协议域名端口有一者不同,就被视为非同域。
Why
为什么会存在跨域问题
同源策略
由于出于安全考虑,浏览器规定JavaScript不能操作其他域下的页面DOM,不能接受其他域下的xhr请求(不只是js,引用非同域下的字体文件,还有canvas引用非同域下的图片,也被同源策略所约束)
只要协议、域名、端口有一者不同,就被视为非同域。
如何解决
要解决跨域问题,就要绕过浏览器对js的限制,另辟蹊径
JSONP
这是最简单,也是最流行的跨域解决方案,它利用script标签不受同源策略的影响,解决跨域,需要后台配合,返回特殊格式的数据
前端
后端
// Express(Nodejs) // mock data const USERS=[ {name:"Tom",age:23}, {name:"Jack",age:23} ]; app.get("/user",function (req,res) { let cbName=req.query["callback"]; // 这里做一个容错处理 res.send(` try{ ${cbName}(${JSON.stringify(USRES)}); }catch(ex) { console.error("The data is invalid"); } `); });
CORS (cross-origin resource sharing)
跨域资源共享,是W3C的一个标准,它允许浏览器发送跨域服务器的请求,CORS需要浏览器和服务器同时支持
后端
简单请求和非简单请求详情,请阅读阮一峰老师的博文,这里不再敖述
app.use(function (req,res,next){ res.header("Access-Control-Allow-Origin", "http://localhost:6666"); // 允许跨域的白名单,一般不建议使用 * 号 res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE"); // 允许请求的方法,非简单请求,会进行预检 res.header("Access-Control-Allow-Headers", "Content-Type"); // 允许请求携带的头信息,非简单请求,会进行预检 res.header("Access-Control-Allow-Credentials","true"); // 允许发送cookie,这里前端xhr也需要一起配置 `xhr.withCredentials=true` next(); });
代理
只要是在与你同域下的服务器,新建一个代理(服务端不存在同源策略),将你的跨域请求全部代理转发
后端
const proxy=require("http-proxy-middleware"); // 这里使用这个中间件完成代理 app.use("/api", proxy("http://b.com")); // http://a.com/api -> http://b.com/api
window.name+iframe
MDN里解释道它是获取/设置窗口的名称,因为的它在不同页面甚至域名加载后值都不会改变,该属性也被用于作为 JSONP 的一个更安全的备选来提供跨域通信(cross-domain messaging)
前端
后端
// Express(Nodejs) // mock data const USERS=[ {name:"Tom",age:23}, {name:"Jack",age:23} ]; app.get("/user",function (req,res) { res.send(` `); });
document.domian
这个使用情况有限,例如
http://a.c.com
http://b.c.com
主域相同时,分别设置他们页面的document.domain="c.com";
locaction.hash+iframe
嵌套两层iframe,达到第一层与第三层同域,就可以互相通信了
图片ping
这个只能发出去请求,无法获取到服务器的响应,常常用于网站流量统计
let img=new Image(); img.addEventListener("load",function () { console.log("Send success"); // todo }); img.src="http://site.c.com/a.gif?count=666";
postMessage+iframe
postMessage+form+iframe
这个需要后台配合返回特殊格式的数据,TL,DR 可以看这个demo
WebSocket
WebSocket是一种通信协议,该协议不实行同源政策,
注意需要浏览器和服务器都支持的情况下
后端
// Nodejs const server = require("http").createServer(); const io = require("socket.io")(server); io.on("connection", function (client) { client.emit("data", "This message from "http://b.com""); });Summary
目前个人在工作中遇到的解决方法就是这些,当然还有许多其他的方法,你看,其实跨域并不难吧 ^_^
js通过xhr发的跨域请求,虽然得不到响应,但是可以发送出去,其实如果是单向通信的话,也可以,比如文章阅读统计,网站流量统计
Reference跨域资源共享 CORS 详解---阮一峰
不要再问我跨域的问题了
FatDong1/cross-domain
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108787.html
摘要:基本概念首先,函数不能存储的值,指向哪里,取决于调用它的对象。如果没有这个对象,那默认就是调用非严格模式下。也就是说是在运行的时候定义的,不是在绑定的时候定义的。 基本概念 首先,函数不能存储this的值,this指向哪里,取决于调用它的对象。如果没有这个对象,那默认就是window调用(非严格模式下)。也就是说this是在运行的时候定义的,不是在绑定的时候定义的。 funct...
摘要:一到底是一门什么样的计算机编程语言表里不一表面上是动态解释执行的脚本语言,实际上它是一门编译语言。与众不同与传统语言不同的是,它不是提前编译的,编译记过也不能在分布式系统中进行移植。千篇一律引擎进行编译的步骤和传统的编译语言非常相似。 一、JavaScript到底是一门什么样的计算机编程语言? JavaScript表里不一:表面上是动态、解释执行的脚本语言,实际上它是一门编译语言。 ...
摘要:在我们的程序中有很多变量标识符,我们现在或者将来将使用它。当我们使用时,如果并没有找到这个变量,在非严格模式下,程序会默认帮我们在全局创建一个变量。词法作用域也就是说,变量的作用域就是他声明的时候的作用域。 作用域 定义 首先我们来想想作用域是用来干什么的。在我们的程序中有很多变量(标识符identifier),我们现在或者将来将使用它。那么多变量,我咋知道我有没有声明或者定义过他呢,...
摘要:运行规则根据的运作原理,我们可以看到,的值和调用栈通过哪些函数的调用运行到调用当前函数的过程以及如何被调用有关。 1. this的诞生 假设我们有一个speak函数,通过this的运行机制,当使用不同的方法调用它时,我们可以灵活的输出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...
摘要:回调传递函数是将函数当做值并作为参数传递给函数。这个例子中就是因为事件绑定机制中的传入了回调函数,产生了闭包,引用着所在的作用域,所以此处的数据无法从内存中释放。 javascript作用域 一门语言需要一套设计良好的规则来存储变量,并且之后可以方便的找到这些变量,这逃规则被称为作用域。 这也意味着当我们访问一个变量的时候,决定这个变量能否访问到的依据就是这个作用域。 一、词法作用域 ...
阅读 3469·2021-10-08 10:04
阅读 841·2019-08-30 15:54
阅读 2147·2019-08-29 16:09
阅读 1332·2019-08-29 15:41
阅读 2251·2019-08-29 11:01
阅读 1709·2019-08-26 13:51
阅读 1007·2019-08-26 13:25
阅读 1784·2019-08-26 13:24