js前端處理跨域的九種方式

更新時(shí)間：2024年07月11日 09:58:18 作者：貧僧法號(hào)依平

本文主要介紹了js前端處理跨域的九種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

什么是跨域

指一個(gè)域下文檔或者腳本去請(qǐng)求另一個(gè)域下的資源，這里的跨域是廣義的；

廣義的跨域：

資源提跳轉(zhuǎn)：A鏈接、重定向、表單提交
資源潛入：link、script、img、frame等dom標(biāo)簽，還有樣式中background:url()、@font-face()等文件外鏈
腳本請(qǐng)求：js發(fā)起的ajax請(qǐng)求、dom和js對(duì)象的跨域操作；

其實(shí)我們通常說(shuō)的跨域是由 “瀏覽器同源策略限制” 的一類(lèi)請(qǐng)求場(chǎng)景

什么是同源策略

同源策略（Same origin policy），簡(jiǎn)稱SOP，是一種約定，它由Netscape公司1995年引入瀏覽器，它是瀏覽器核心也是最基本的安全功能，如果缺少同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指“協(xié)議+ 域名+ 端口”三種相同；

同源策略的目的

為了保證用戶信息的安全，防止惡意網(wǎng)站竊取數(shù)據(jù)

同源策略限制的行為操作

cookie、localStorage、IndexDB無(wú)法讀取（不能共享cookie）
DOM和Js對(duì)象無(wú)法獲得（不能相互操作dom）
Ajax請(qǐng)求不能發(fā)送(不能發(fā)送ajax請(qǐng)求)

跨域解決方案

通過(guò)jsonp跨域
document.domain + iframe跨域
location.hash + iframe
window.name + iframe跨域
postMessage跨域
跨域資源共享（CORS）
nginx代理跨域
nodejs中間件代理跨域
WebSocket協(xié)議跨域

一、通過(guò)jsonp跨域

通常為了減輕web服務(wù)器的負(fù)載，我們把js、css、img等靜態(tài)資源分離在另一臺(tái)服務(wù)器上，在html頁(yè)面中再通過(guò)相應(yīng)的標(biāo)簽從不痛域名下加載靜態(tài)資源，而被瀏覽器允許，基于此原理，我們可以通過(guò)動(dòng)態(tài)創(chuàng)建script，再請(qǐng)求一個(gè)帶參網(wǎng)址實(shí)現(xiàn)跨域通信。

原生實(shí)現(xiàn)

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 傳參并指定回調(diào)執(zhí)行函數(shù)為onBack
    script.src = 'http://www.demo2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回調(diào)執(zhí)行函數(shù)
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

jquery ajax

$.ajax({
    url: 'http://www.demo2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 請(qǐng)求方式為jsonp
    jsonpCallback: "onBack",    // 自定義回調(diào)函數(shù)名
    data: {}
});

vue.js：

this.$http.jsonp('http://www.demo2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})

jsonp缺點(diǎn)：只能實(shí)現(xiàn)get一種請(qǐng)求

二、 document.domain + iframe跨域此方案僅限主域相同，子域不同的跨域應(yīng)用場(chǎng)景。

實(shí)現(xiàn)原理：兩個(gè)頁(yè)面都通過(guò)js強(qiáng)制設(shè)置document.domain為基礎(chǔ)主域，就實(shí)現(xiàn)了同域。

1.）父窗口:

<iframe id="iframe" src="http://child.demo.com/b.html"></iframe>
<script>
    document.domain = 'demo.com';
    var user = 'admin';
</script>

子窗口：

<script>
    document.domain = 'demo.com';
    // 獲取父窗口中變量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

三、 location.hash + iframe跨域

實(shí)現(xiàn)原理： a欲與b跨域相互通信，通過(guò)中間頁(yè)c來(lái)實(shí)現(xiàn)。三個(gè)頁(yè)面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問(wèn)來(lái)通信。

具體實(shí)現(xiàn)：A域：a.html -> B域：b.html -> A域：c.html，a與b不同域只能通過(guò)hash值單向通信，b與c也不同域也只能單向通信，但c與a同域，所以c可通過(guò)parent.parent訪問(wèn)a頁(yè)面所有對(duì)象。

1.）a.html：

<iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 向b.html傳hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 開(kāi)放給同域c.html的回調(diào)方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>

2.）b.html：

<iframe id="iframe" src="http://www.demo1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 監(jiān)聽(tīng)a.html傳來(lái)的hash值，再傳給c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>

3.）c.html

<script>
    // 監(jiān)聽(tīng)b.html傳來(lái)的hash值
    window.onhashchange = function () {
        // 再通過(guò)操作同域a.html的js回調(diào)，將結(jié)果傳回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

四、 window.name + iframe跨域

window.name屬性的獨(dú)特之處：name值在不同的頁(yè)面（甚至不同域名）加載后依舊存在，并且可以支持非常長(zhǎng)的 name 值（2MB）。

1.）a.html：

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');

    // 加載跨域頁(yè)面
    iframe.src = url;

    // onload事件會(huì)觸發(fā)2次，第1次加載跨域頁(yè)，并留存數(shù)據(jù)于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy頁(yè))成功后，讀取同域window.name中數(shù)據(jù)
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域頁(yè))成功后，切換到同域代理頁(yè)面
            iframe.contentWindow.location = 'http://www.demo1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 獲取數(shù)據(jù)以后銷(xiāo)毀這個(gè)iframe，釋放內(nèi)存；這也保證了安全（不被其他域frame js訪問(wèn)）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 請(qǐng)求跨域b頁(yè)面數(shù)據(jù)
proxy('http://www.demo2.com/b.html', function(data){
    alert(data);
});

2.）proxy.html：
中間代理頁(yè)，與a.html同域，內(nèi)容為空即可。

3.）b.html：

<script>
    window.name = 'This is demo2 data!';
</script>

總結(jié)：通過(guò)iframe的src屬性由外域轉(zhuǎn)向本地域，跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。這個(gè)就巧妙地繞過(guò)了瀏覽器的跨域訪問(wèn)限制，但同時(shí)它又是安全操作。

五、 postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問(wèn)題： a.）頁(yè)面和其打開(kāi)的新窗口的數(shù)據(jù)傳遞 b.）多窗口之間消息傳遞 c.）頁(yè)面與嵌套的iframe消息傳遞 d.）上面三個(gè)場(chǎng)景的跨域數(shù)據(jù)傳遞

用法：postMessage(data,origin)方法接受兩個(gè)參數(shù) data： html5規(guī)范支持任意基本類(lèi)型或可復(fù)制的對(duì)象，但部分瀏覽器只支持字符串，所以傳參時(shí)最好用JSON.stringify()序列化。 origin：協(xié)議+主機(jī)+端口號(hào)，也可以設(shè)置為"*“，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為”/"。

1.）a.html：

iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2傳送跨域數(shù)據(jù)
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.demo2.com');
    };

    // 接受domain2返回?cái)?shù)據(jù)
    window.addEventListener('message', function(e) {
        alert('data from demo2 ---> ' + e.data);
    }, false);
</script>

2.）b.html：

<script>
    // 接收domain1的數(shù)據(jù)
    window.addEventListener('message', function(e) {
        alert('data from demo1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 處理后再發(fā)回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.demo1.com');
        }
    }, false);
</script>

六、跨域資源共享（CORS)

普通跨域請(qǐng)求：只服務(wù)端設(shè)置Access-Control-Allow-Origin即可，前端無(wú)須設(shè)置，若要帶cookie請(qǐng)求：前后端都需要設(shè)置。

需注意的是：由于同源策略的限制，所讀取的cookie為跨域請(qǐng)求接口所在域的cookie，而非當(dāng)前頁(yè)。如果想實(shí)現(xiàn)當(dāng)前頁(yè)cookie的寫(xiě)入，可參考下文：七、nginx反向代理中設(shè)置proxy_cookie_domain 和八、NodeJs中間件代理中cookieDomainRewrite參數(shù)的設(shè)置。

目前，所有瀏覽器都支持該功能(IE8+：IE8/9需要使用XDomainRequest對(duì)象來(lái)支持CORS）)，CORS也已經(jīng)成為主流的跨域解決方案。

1、前端設(shè)置：

1.）原生ajax

// 前端設(shè)置是否帶cookie
xhr.withCredentials = true;

示例代碼：

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端設(shè)置是否帶cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.demo2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

2.）jQuery ajax

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端設(shè)置是否帶cookie
   },
   crossDomain: true,   // 會(huì)讓請(qǐng)求頭中包含跨域的額外信息，但不會(huì)含cookie
    ...
});

3.）vue框架在vue-resource封裝的ajax組件中加入以下代碼：

Vue.http.options.credentials = true

2、服務(wù)端設(shè)置：

若后端設(shè)置成功，前端瀏覽器控制臺(tái)則不會(huì)出現(xiàn)跨域報(bào)錯(cuò)信息，反之，說(shuō)明沒(méi)設(shè)成功。

1.）PHP后臺(tái)：

response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");  // 若有端口需寫(xiě)全（協(xié)議+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");

2.）Nodejs后臺(tái)示例：

ar http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var postData = '';

    // 數(shù)據(jù)塊接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 數(shù)據(jù)接收完畢
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域后臺(tái)設(shè)置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允許發(fā)送Cookie
            'Access-Control-Allow-Origin': 'http://www.demo1.com',    // 允許訪問(wèn)的域（協(xié)議+域名+端口）
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.demo2.com;HttpOnly'   // HttpOnly:腳本無(wú)法讀取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');
console.log('Server is running at port 8080...');

七、Nodejs中間件代理跨域

node中間件實(shí)現(xiàn)跨域代理，原理大致與nginx相同，都是通過(guò)啟一個(gè)代理服務(wù)器，實(shí)現(xiàn)數(shù)據(jù)的轉(zhuǎn)發(fā)，也可以通過(guò)設(shè)置cookieDomainRewrite參數(shù)修改響應(yīng)頭中cookie中域名，實(shí)現(xiàn)當(dāng)前域的cookie寫(xiě)入，方便接口登錄認(rèn)證。

1、非vue框架的跨域（2次跨域）

利用node + express + http-proxy-middleware搭建一個(gè)proxy服務(wù)器。

1.）前端代碼示例：

var xhr = new XMLHttpRequest();

// 前端開(kāi)關(guān)：瀏覽器是否讀寫(xiě)cookie
xhr.withCredentials = true;

// 訪問(wèn)http-proxy-middleware代理服務(wù)器
xhr.open('get', 'http://www.demo1.com:3000/login?user=admin', true);
xhr.send();

2.）中間件服務(wù)器：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({
    // 代理跨域目標(biāo)接口
    target: 'http://www.demo2.com:8080',
    changeOrigin: true,

    // 修改響應(yīng)頭信息，實(shí)現(xiàn)跨域并允許帶cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },

    // 修改響應(yīng)信息中的cookie域名
    cookieDomainRewrite: 'www.demo1.com'  // 可以為false，表示不修改
}));

app.listen(3000);
console.log('Proxy server is listen at port 3000...');

3.）Nodejs后臺(tái)

ar http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));

    // 向前臺(tái)寫(xiě)cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.demo2.com;HttpOnly'   // HttpOnly:腳本無(wú)法讀取
    });

    res.write(JSON.stringify(params));
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

2、 vue框架的跨域（1次跨域）

利用node + webpack + webpack-dev-server代理接口跨域。在開(kāi)發(fā)環(huán)境下，由于vue渲染服務(wù)和接口代理服務(wù)都是webpack-dev-server同一個(gè)，所以頁(yè)面與代理接口之間不再跨域，無(wú)須設(shè)置headers跨域信息了。

webpack.config.js部分配置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.demo2.com:8080',  // 代理跨域目標(biāo)接口
            changeOrigin: true,
            secure: false,  // 當(dāng)代理某些https服務(wù)報(bào)錯(cuò)時(shí)用
            cookieDomainRewrite: 'www.demo1.com'  // 可以為false，表示不修改
        }],
        noInfo: true
    }
}

八、 WebSocket協(xié)議跨域

WebSocket protocol是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時(shí)允許跨域通訊，是server push技術(shù)的一種很好的實(shí)現(xiàn)。原生WebSocket API使用起來(lái)不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡(jiǎn)單、靈活的接口，也對(duì)不支持webSocket的瀏覽器提供了向下兼容。

1.）前端代碼：

<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.demo2.com:8080');

// 連接成功處理
socket.on('connect', function() {
    // 監(jiān)聽(tīng)服務(wù)端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 監(jiān)聽(tīng)服務(wù)端關(guān)閉
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

2.）Nodejs socket后臺(tái)：

// 啟http服務(wù)
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 監(jiān)聽(tīng)socket連接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 斷開(kāi)處理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});

九、 nginx代理跨域

1、 nginx配置解決iconfont跨域

瀏覽器跨域訪問(wèn)js、css、img等常規(guī)靜態(tài)資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時(shí)可在nginx的靜態(tài)資源服務(wù)器中加入以下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}

2、 nginx反向代理接口跨域

跨域原理：同源策略是瀏覽器的安全策略，不是HTTP協(xié)議的一部分。服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不會(huì)執(zhí)行JS腳本，不需要同源策略，也就不存在跨越問(wèn)題。

實(shí)現(xiàn)思路：通過(guò)nginx配置一個(gè)代理服務(wù)器（域名與demo1相同，端口不同）做跳板機(jī)，反向代理訪問(wèn)demo2接口，并且可以順便修改cookie中demo信息，方便當(dāng)前域cookie寫(xiě)入，實(shí)現(xiàn)跨域登錄。

nginx具體配置：

#proxy服務(wù)器
server {
    listen       81;
    server_name  www.demo1.com;

    location / {
        proxy_pass   http://www.demo2.com:8080;  #反向代理
        proxy_cookie_demo www.demo2.com www.demo1.com; #修改cookie里域名
        index  index.html index.htm;

        # 當(dāng)用webpack-dev-server等中間件代理接口訪問(wèn)nignx時(shí)，此時(shí)無(wú)瀏覽器參與，故沒(méi)有同源限制，下面的跨域配置可不啟用
        add_header Access-Control-Allow-Origin http://www.demo1.com;  #當(dāng)前端只跨域不帶cookie時(shí)，可為*
        add_header Access-Control-Allow-Credentials true;
    }
}

1.) 前端代碼示例：

var xhr = new XMLHttpRequest();

// 前端開(kāi)關(guān)：瀏覽器是否讀寫(xiě)cookie
xhr.withCredentials = true;

// 訪問(wèn)nginx中的代理服務(wù)器
xhr.open('get', 'http://www.demo1.com:81/?user=admin', true);
xhr.send();

2.) Nodejs后臺(tái)示例：

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));

    // 向前臺(tái)寫(xiě)cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.demo2.com;HttpOnly'   // HttpOnly:腳本無(wú)法讀取
    });

    res.write(JSON.stringify(params));
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

到此這篇關(guān)于js前端處理跨域的九種方式的文章就介紹到這了,更多相關(guān)js前端跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js
跨域

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js前端處理跨域的九種方式

目錄

什么是跨域

廣義的跨域：

什么是同源策略

同源策略的目的

同源策略限制的行為操作

跨域解決方案

一、通過(guò)jsonp跨域

二、 document.domain + iframe跨域此方案僅限主域相同，子域不同的跨域應(yīng)用場(chǎng)景。

三、 location.hash + iframe跨域

四、 window.name + iframe跨域

五、 postMessage跨域

六、跨域資源共享（CORS)

1、前端設(shè)置：

2、服務(wù)端設(shè)置：

七、Nodejs中間件代理跨域

1、非vue框架的跨域（2次跨域）

2、 vue框架的跨域（1次跨域）

八、 WebSocket協(xié)議跨域

九、 nginx代理跨域

1、 nginx配置解決iconfont跨域

2、 nginx反向代理接口跨域

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js前端處理跨域的九種方式

目錄

什么是跨域

廣義的跨域：

什么是同源策略

同源策略的目的

同源策略限制的行為操作

跨域解決方案

一、通過(guò)jsonp跨域

二、 document.domain + iframe跨域 此方案僅限主域相同，子域不同的跨域應(yīng)用場(chǎng)景。

三、 location.hash + iframe跨域

四、 window.name + iframe跨域

五、 postMessage跨域

六、 跨域資源共享（CORS)

1、 前端設(shè)置：

2、 服務(wù)端設(shè)置：

七、Nodejs中間件代理跨域

1、 非vue框架的跨域（2次跨域）

2、 vue框架的跨域（1次跨域）

八、 WebSocket協(xié)議跨域

九、 nginx代理跨域

1、 nginx配置解決iconfont跨域

2、 nginx反向代理接口跨域

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

二、 document.domain + iframe跨域此方案僅限主域相同，子域不同的跨域應(yīng)用場(chǎng)景。

三、 location.hash + iframe跨域

四、 window.name + iframe跨域

五、 postMessage跨域

六、跨域資源共享（CORS)

1、前端設(shè)置：

2、服務(wù)端設(shè)置：

七、Nodejs中間件代理跨域

1、非vue框架的跨域（2次跨域）

2、 vue框架的跨域（1次跨域）

八、 WebSocket協(xié)議跨域

1、 nginx配置解決iconfont跨域

2、 nginx反向代理接口跨域