日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章主要為大家展示了“WEB前端跨域的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“WEB前端跨域的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為萬全等服務(wù)建站，萬全等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為萬全企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

WEB前端跨域解決方案

跨域定義

廣義的定義：跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源。

1、資源跳轉(zhuǎn)： 鏈接、重定向、表單提交

2、資源嵌入：、

//jquery ajax：
$.ajax({
  url: "http://www.chuchur.com/login",
  type: "get",
  dataType: "jsonp", // 請求方式為jsonp
  jsonpCallback: "test", // 自定義回調(diào)函數(shù)名
  data: {},
});

//vue.js
this.$http
  .jsonp("http://www.chuchur.com/login", {
    params: {},
    jsonp: "test",
  })
  .then((res) => {
    console.log(res);
  });

2）document.domain + iframe 跨域

原理：這種方案只限于主域相同，子域不同的情況，其原理就是 兩個頁面通過js強(qiáng)制設(shè)置window.domain為主域，這樣就實現(xiàn)了同域。

實現(xiàn)：

3）location.hash + iframe跨域

原理： 其原理就是通過URL傳值，然后監(jiān)聽其hash值的變化，然后通過中間層做跳板，再利用父子窗口js parent最終來訪問同域所有頁面對象。

域 1: a.html ，域 2:b.html ，域 1:c.html 。

a.html，b.html 不同域只能通過hash傳值通訊。

b.html，c.html 也不同域也只能單項通訊

a.html，c.html 同域，所以c.html可以通過parent來訪問a.html頁面對象

實現(xiàn)：

1、a.html：(www.chuchur.com/a.html)

`

2、b.html：(www.chuchur.org/b.html)

3、c.html：(www.chuchur.com/c.html)

4）window.name + iframe跨域

原理：利用window.name特有屬性，name值在不同的頁面甚至不同域 ，當(dāng)頁面重新加載后依然存在，并且支持非常長的值，約 2MB。

實現(xiàn)：

// 1.）a.html：(www.chuchur.com/a.html)
var proxy = function (url, callback) {
  var state = 0;
  var iframe = document.createElement("iframe");
  // 加載跨域頁面 ，先讓頁面的name執(zhí)行賦值，
  iframe.src = url;
  // onload事件會觸發(fā)2次，第1次加載跨域頁，并留存數(shù)據(jù)于window.name
  iframe.onload = function () {
    if (state === 1) {
      // 第2次onload(同域proxy頁)成功后，讀取同域window.name中數(shù)據(jù)
      test(iframe.contentWindow.name);
      destoryFrame();
    } else if (state === 0) {
      // 第1次onload(跨域頁)成功后，切換到同域代理頁面
      iframe.contentWindow.location = "http://www.chuchur.com/b.html";
      state = 1;
    }
  };
  document.body.appendChild(iframe);
  // 獲取數(shù)據(jù)以后銷毀這個iframe，釋放內(nèi)存；這也保證了安全（不被其他域frame js訪問）
  function destoryFrame() {
    iframe.contentWindow.document.write("");
    iframe.contentWindow.close();
    document.body.removeChild(iframe);
  }
};

// 請求跨域b頁面數(shù)據(jù)
proxy("http://www.domain2.com/b.html", function (data) {
  alert(data);
});
// 2.）proxy.html：(www.chuchur.com/proxy.html）, 這個頁面可以什么都不寫，但是要保證能正常訪問

5）postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，可以解決以下方面的問題：

a.）頁面和其打開的新窗口的數(shù)據(jù)傳遞

b.）多窗口之間消息傳遞

c.）頁面與嵌套的iframe消息傳遞

d.）上面三個場景的跨域數(shù)據(jù)傳遞 用法：postMessage(data, origin)方法接受兩個參數(shù)

data：html5規(guī)范支持任意基本類型或可復(fù)制的對象，但部分瀏覽器只支持字符串，所以傳參時最好用JSON.stringify()序列化。

origin： 協(xié)議+主機(jī)+端口號，也可以設(shè)置為"\*"，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

實現(xiàn)：

6）跨域資源共享（CORS）

原理：普通跨域請求：只服務(wù)端設(shè)置Access-Control-Allow-Origin即可，前端無須設(shè)置。

帶cookie請求：前后端都需要設(shè)置字段，另外需注意：所帶cookie為跨域請求接口所在域的cookie，而非當(dāng)前頁。 目前，所有瀏覽器都支持該功能(IE8+：IE8/9需要使用XDomainRequest對象來支持CORS)，CORS也已經(jīng)成為主流的跨域解決方案。

實現(xiàn)：

//1）原生js
var xhr = new XMLHttpRequest(); // IE8/9需用window. XDomainRequest兼容

// 前端設(shè)置是否帶cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.chuchur.com/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=chuchur');
xhr.onreadystatechange = function() {

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

};
//2.）jQuery ajax
$.ajax({
  ...
  xhrFields: {
    withCredentials: true // 前端設(shè)置是否帶cookie
  },
  crossDomain: true, // 會讓請求頭中包含跨域的額外信息，但不會含cookie
  ...
});
//3.）vue框架在vue-resource封裝的ajax組件中加入以下代碼：
Vue.http.options.credentials = true

//后臺服務(wù)端
//java
/*
 * 導(dǎo)入包：import javax.servlet.http. HttpServletResponse;
 * 接口參數(shù)中定義：HttpServletResponse response
 */
response.setHeader("Access-Control-Allow-Origin", "http://www.chuchur.com"); // 若有端口需寫全（協(xié)議+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");

//node
var server = http.createServer();
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);
    // 跨域后臺設(shè)置
    res.writeHead(200, {
      'Access-Control-Allow-Credentials': 'true', // 后端允許發(fā)送Cookie
      'Access-Control-Allow-Origin': 'http://www.chuchur.com', // 允許訪問的域（協(xié)議+域名+端口）
      'Set-Cookie': 'l=abcdef; Path=/; Domain=www.chuchur.com; HttpOnly' // HttpOnly: 腳本無法讀取cookie
    });

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

  });

});
server.listen('3000');

7）nginx反向代理跨域

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

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

原理：通過nginx代理一個 同域不同端口的跳板機(jī)，反向代理要跨域的域名，這樣可以修改cookie里面的domain信息實現(xiàn)跨域

實現(xiàn)：

#nginx具體配置：
server {

    listen       80;
    server_name  www.chuchur.com;
    location / {
        proxy_pass   http://www.chuchur.org; #反向代理
        proxy_cookie_domain www.chuchur.org www.chuchur.com; #修改cookie里域名
        index  index.html index.htm;

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

}

前端實現(xiàn)

var xhr = new XMLHttpRequest();
// 前端開關(guān)：瀏覽器是否讀寫cookie
xhr.withCredentials = true;
// 訪問nginx中的代理服務(wù)器
xhr.open('get', 'http://www.chuchur.com/?user=chuchur', true);
xhr.send();

// node
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));
  // 向前臺寫cookie
  res.writeHead(200, {

    'Set-Cookie': 'l=abcdef; Path=/; Domain=www.chuchur.org; HttpOnly' // HttpOnly: 腳本無法讀取

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

});
server.listen('8080');

8）Nodejs中間件代理跨域

原理同nignx代理跨域類似，都是通過代理服務(wù)器實現(xiàn)數(shù)據(jù)轉(zhuǎn)發(fā)

實現(xiàn)：

//1）利用中間件http-proxy-middleware實現(xiàn)
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({

  // 代理跨域目標(biāo)接口
  target: 'http://www.chuchur.org:',
  changeOrigin: true,
  // 修改響應(yīng)頭信息，實現(xiàn)跨域并允許帶cookie
  onProxyRes: function(proxyRes, req, res) {

    res.header('Access-Control-Allow-Origin', 'http://www.chuchur.com');
    res.header('Access-Control-Allow-Credentials', 'true');

  },

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

}));

app.listen(3000);
//2）利用中間件 webpack-dev-server實現(xiàn)
//webpack.config.js部分配置：
module.exports = {
  entry: {},
  module: {},
  ...
  devServer: {
    historyApiFallback: true,
    proxy: [{
      context: '/login',
      target: 'http://www.chuchur.org', // 代理跨域目標(biāo)接口
      changeOrigin: true,
      cookieDomainRewrite: 'www.chuchur.com' // 可以為false，表示不修改
    }],
    noInfo: true

  }
}

9）WebSocket協(xié)議跨域

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

實現(xiàn)：

1、前端代碼

user input：

2、Nodejs socket后臺：

var http = require('http');
var socket = require('socket.io');

// 啟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)聽socket連接
socket.listen(server).on('connection', function(client) {

      // 接收信息
      client.on('message', function(msg) {
          client.send('哈哈：' + msg);
          console.log('來自客服端的消息': -- - > ' + msg);
          });

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

      });

以上 9 種方式都能實現(xiàn)跨域數(shù)據(jù)傳遞，用的最多的還是第六種跨域資源共享（CORS），在前后端分離開發(fā)模式最常見。第七種和第八種中間件代理實現(xiàn)方式則是在基于node開發(fā)種常用的

其中第二，三、四、五種方案 ，利用ifame和postMessage則可以實現(xiàn) 不同窗口之間的數(shù)據(jù)通訊。

以上是“WEB前端跨域的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！