proxy跨域

跨域

瀏覽器訪問非同源的網址時,會被限制訪問,出現跨域問題.

解決方案:

  1.response 添加 header(CORS)

  2.JSONP 方式

  3.全局對象+iframe

       (1)document.domain+iframe的設置  (只有在主域相同的時候才能使用該方法):

                   設置document.domain值相同即可訪問

       (2)HTML5的postMessage(window.postMessage):

                  監聽message事件,獲取data

       (3)使用window.name來進行跨域:

                 源頁面的數據賦值給window.name、修改src使其與為請求頁面同源頁(window.name不變)、請求頁拿到同源頁的window.name(數據)

  4.代理(proxy)

原理

服務器訪問服務器沒有跨域問題.所以,我們的做法是利用中間的代理瀏覽器向目標瀏覽器發請求.

 

代理方式配置

  1.http-proxy-middleware

如下:利用node.js里面的express框架創建了一個服務器,並向目標服務器發送請求

 

 1 // 引用依賴
 2 var express = require('express');
 3 var proxy = require('http-proxy-middleware');
 4 
 5 // proxy 中間件的選擇項
 6 var options = {
 7         target: 'http://www.example.org', // 目標服務器 host
 8         changeOrigin: true,               // 默認false，是否需要改變原始主機頭為目標URL
 9         ws: true,                         // 是否代理websockets
10         pathRewrite: {
11             '^/api/old-path' : '/api/new-path',     // 重寫請求，比如我們源訪問的是api/old-path，那么請求會被解析為/api/new-path
12             '^/api/remove/path' : '/path'           // 同上
13         },
14         router: {
15             // 如果請求主機 == 'dev.localhost:3000',
16             // 重寫目標服務器 'http://www.example.org' 為 'http://localhost:8000'
17             'dev.localhost:3000' : 'http://localhost:8000'
18         }
19     };
20 
21 // 創建代理
22 var exampleProxy = proxy(options);
23 
24 // 使用代理
25 var app = express();
26     app.use('/api', exampleProxy);//注意,這里的"/api"不是必須寫"/api"的,而是根據你請求的路徑寫的 27     app.listen(3000);

 

   2.webpack或者vue-cli之類的devSever

同樣是利用node.js創建一個本地服務器進行代理,只是配置方式有些微不同,更為簡潔.以webpack.config.js的配置為例

devServer:{

proxyTable: {//高版本的是"proxy" // 當你請求是以/api開頭的接口，則我幫你代理訪問到https://api.douban.com
      '/api/*': {
        target: 'https://api.douban.com', // 你接口的域名
        secure: false, // 如果是https接口，需要配置這個參數
        changeOrigin: true, // 如果接口跨域，需要進行這個參數配置

        pathRewrite: {
            '^/api/old-path' : '/api/new-path',     // 重寫請求，比如我們源訪問的是api/old-path，那么請求會被解析為/api/new-path '^/api/remove/path' : '/path' // 同上  }

  } }
}

  3.nginx代理

簡而言之就是用c語言創建一個服務器,和上面兩張方式不一樣.

 

4.whistle等調試工具

也是基於node實現的,功能復雜,操作簡單.

 

總結:

  代理跨域的主要方式是利用服務器請求服務器的方式避過跨域問題來實現的.大概的流程:瀏覽器===>代理服務器===>目標服務器.

  主要手段兩種:1.項目中的代碼實現,利用node創建服務器.因為有代碼在,所以就算不在本機上運行項目也可以實現跨域.

                       2.工具.以上提到的工具都是在本地手動創建一個服務器,然后再運行代碼.所以當代碼不在本地運行時還是會跨域,要重新配置.工具跨域更適合調試.