资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/You don't know cross-origin

You don't know cross-origin

hersion / 913人阅读

摘要：为什么会存在跨域问题同源策略由于出于安全考虑，浏览器规定不能操作其他域下的页面，不能接受其他域下的请求不只是，引用非同域下的字体文件，还有引用非同域下的图片，也被同源策略所约束只要协议域名端口有一者不同，就被视为非同域。

Why 
为什么会存在跨域问题

同源策略

由于出于安全考虑，浏览器规定JavaScript不能操作其他域下的页面DOM，不能接受其他域下的xhr请求（不只是js，引用非同域下的字体文件，还有canvas引用非同域下的图片，也被同源策略所约束）
只要协议、域名、端口有一者不同，就被视为非同域。

How 
如何解决

要解决跨域问题，就要绕过浏览器对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

云服务器 idc机房托管 don&039&039t 企业you&039x Know python中&039t&039

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108787.html

相关文章

  • 读书笔记(you don't know js): this的理解（没写完...)

    摘要：基本概念首先，函数不能存储的值，指向哪里，取决于调用它的对象。如果没有这个对象，那默认就是调用非严格模式下。也就是说是在运行的时候定义的，不是在绑定的时候定义的。 基本概念 首先，函数不能存储this的值，this指向哪里，取决于调用它的对象。如果没有这个对象，那默认就是window调用（非严格模式下）。也就是说this是在运行的时候定义的，不是在绑定的时候定义的。 funct...

    freewolf 评论0 收藏0

  • 一起来读you don't know javascript（一）

    摘要：一到底是一门什么样的计算机编程语言表里不一表面上是动态解释执行的脚本语言，实际上它是一门编译语言。与众不同与传统语言不同的是，它不是提前编译的，编译记过也不能在分布式系统中进行移植。千篇一律引擎进行编译的步骤和传统的编译语言非常相似。 一、JavaScript到底是一门什么样的计算机编程语言？ JavaScript表里不一：表面上是动态、解释执行的脚本语言，实际上它是一门编译语言。 ...

    Anchorer 评论0 收藏0

  • 《You Don't Know JS》阅读理解——作用域

    摘要：在我们的程序中有很多变量标识符，我们现在或者将来将使用它。当我们使用时，如果并没有找到这个变量，在非严格模式下，程序会默认帮我们在全局创建一个变量。词法作用域也就是说，变量的作用域就是他声明的时候的作用域。 作用域 定义 首先我们来想想作用域是用来干什么的。在我们的程序中有很多变量（标识符identifier），我们现在或者将来将使用它。那么多变量，我咋知道我有没有声明或者定义过他呢，...

    codeKK 评论0 收藏0

  • 《You Don't Know JS》阅读理解——this

    摘要：运行规则根据的运作原理，我们可以看到，的值和调用栈通过哪些函数的调用运行到调用当前函数的过程以及如何被调用有关。 1. this的诞生 假设我们有一个speak函数，通过this的运行机制，当使用不同的方法调用它时，我们可以灵活的输出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...

    tianren124 评论0 收藏0

  • You Don't Know Js 阅读笔记

    摘要：回调传递函数是将函数当做值并作为参数传递给函数。这个例子中就是因为事件绑定机制中的传入了回调函数，产生了闭包，引用着所在的作用域，所以此处的数据无法从内存中释放。 javascript作用域 一门语言需要一套设计良好的规则来存储变量，并且之后可以方便的找到这些变量，这逃规则被称为作用域。 这也意味着当我们访问一个变量的时候，决定这个变量能否访问到的依据就是这个作用域。 一、词法作用域 ...

    wanglu1209 评论0 收藏0

发表评论

登陆后可评论

0条评论

hersion

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<