You don't know cross-origin

hersion 發(fā)布于2019-08-26 13:25 / 1025人閱讀

摘要：為什么會存在跨域問題同源策略由于出于安全考慮，瀏覽器規(guī)定不能操作其他域下的頁面，不能接受其他域下的請求不只是，引用非同域下的字體文件，還有引用非同域下的圖片，也被同源策略所約束只要協(xié)議域名端口有一者不同，就被視為非同域。

Why

為什么會存在跨域問題

同源策略

由于出于安全考慮，瀏覽器規(guī)定JavaScript不能操作其他域下的頁面DOM，不能接受其他域下的xhr請求（不只是js，引用非同域下的字體文件，還有canvas引用非同域下的圖片，也被同源策略所約束）
只要協(xié)議、域名、端口有一者不同，就被視為非同域。

How

如何解決

要解決跨域問題，就要繞過瀏覽器對js的限制，另辟蹊徑

JSONP

這是最簡單，也是最流行的跨域解決方案，它利用script標(biāo)簽不受同源策略的影響，解決跨域，需要后臺配合，返回特殊格式的數(shù)據(jù)

前端

后端

// 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的一個標(biāo)準(zhǔn)，它允許瀏覽器發(fā)送跨域服務(wù)器的請求，CORS需要瀏覽器和服務(wù)器同時支持

后端

簡單請求和非簡單請求詳情，請閱讀阮一峰老師的博文，這里不再敖述

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"); // 允許請求的方法，非簡單請求，會進(jìn)行預(yù)檢
    res.header("Access-Control-Allow-Headers", "Content-Type"); // 允許請求攜帶的頭信息，非簡單請求，會進(jìn)行預(yù)檢
    res.header("Access-Control-Allow-Credentials","true"); // 允許發(fā)送cookie，這里前端xhr也需要一起配置 `xhr.withCredentials=true`
    next();
});

代理

只要是在與你同域下的服務(wù)器，新建一個代理（服務(wù)端不存在同源策略），將你的跨域請求全部代理轉(zhuǎn)發(fā)

后端

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里解釋道它是獲取/設(shè)置窗口的名稱，因?yàn)榈乃诓煌撁嫔踔劣蛎虞d后值都不會改變，該屬性也被用于作為 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
主域相同時，分別設(shè)置他們頁面的document.domain="c.com";

locaction.hash+iframe

嵌套兩層iframe，達(dá)到第一層與第三層同域，就可以互相通信了

圖片ping

這個只能發(fā)出去請求，無法獲取到服務(wù)器的響應(yīng)，常常用于網(wǎng)站流量統(tǒng)計(jì)

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

這個需要后臺配合返回特殊格式的數(shù)據(jù)，TL,DR 可以看這個demo

WebSocket

WebSocket是一種通信協(xié)議，該協(xié)議不實(shí)行同源政策，
注意需要瀏覽器和服務(wù)器都支持的情況下

后端

// 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

目前個人在工作中遇到的解決方法就是這些，當(dāng)然還有許多其他的方法，你看，其實(shí)跨域并不難吧 ^_^

js通過xhr發(fā)的跨域請求，雖然得不到響應(yīng)，但是可以發(fā)送出去，其實(shí)如果是單向通信的話，也可以，比如文章閱讀統(tǒng)計(jì)，網(wǎng)站流量統(tǒng)計(jì)

Reference

跨域資源共享 CORS 詳解---阮一峰
不要再問我跨域的問題了
FatDong1/cross-domain