利用反向代理實現跨域請求

利用反向代理實現跨域的請求

Axios

Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。

它具備如下特徵：

• 從瀏覽器中建立 XMLHttpRequests
• 從 node.js 建立 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防護 XSRF

Promise.resolve(value)

返回一個以給定值解析後的Promise對象。但若是這個值是個thenable（即帶有then方法），返回的promise會「跟隨」這個thenable的對象，採用它的最終狀態（指resolved/rejected/pending/settled）；若是傳入的value自己就是promise對象，則該對象做爲Promise.resolve方法的返回值返回；不然以該值爲成功狀態返回promise對象。

正向代理

正向代理 是一個位於客戶端和原始服務器(origin server)之間的服務器，爲了從原始服務器取得內容，客戶端向代理髮送一個請求並指定目標(原始服務器)，而後代理向原始服務器轉交請求並將得到的內容返回給客戶端。客戶端必需要進行一些特別的設置才能使用正向代理。

正向代理的做用：

• 訪問原來沒法訪問的資源，如google
• 能夠作緩存，加速訪問資源
• 對客戶端訪問受權，上網進行認證
• 代理能夠記錄用戶的訪問記錄，對外隱藏用戶的信息

反向代理

反向代理（Reverse Proxy）實際運行方式是指以代理服務器來接受internet上的鏈接請求，而後將請求轉發給內部網絡上的服務器，並將從服務器上獲得的結果返回給internet上請求鏈接的客戶端，此時代理服務器對外就表現爲一個服務器。

反向代理的做用：

• 保證內網的安全，可使用反向代理提供WAF功能，阻止web攻擊 大型網站，一般將反向代理做爲公網訪問地址，Web服務器是內網。
• 負載均衡，經過反向代理服務器來優化網站的負載。

反向代理該如何理解

在正向代理中，proxy和client同屬於一個LAN，對server而言是透明的。

在反向代理中，proxy和server同屬於一個LAN，對client而言是透明的。

而實際上proxy在兩種代理中作的事都是代爲收發請求和響應，不過從結構上來看正好左右互換了一下，這種結構上的互換就導致後出現的那種代理方式叫作了反向代理。

反向代理實現方法

1.封裝請求的api

以一個get請求爲例

import {commonParams} from 'somewhere'
export function getSomeInfo() {
  const url = 'api/getSomeInfo'
  const data = Object.assign({}, commonParams, {
    key1: value1,
    key2: value2,
    key3: value3,
    ...
  })

  return axios.get(url, {
    params: data
  }).then(res => {
    return Promise.resolve(res.data)
  })
}
複製代碼

2.開發模式下配置ProxyTable

proxyTable: {
  '/api/getSomeInfo': {
    target: 'https://xxxx', // 目標地址
    changeOrigin: true, // 容許跨域
    secure: false, // 若是是https接口，須要配置這個參數
    bypass:function(req,res,proxyOptions){
      req.headers.referer='https://xxxx'; // 請求referer
      req.headers.host='xxx'; // 也能夠不寫，請求會自動發送host
    },
    pathRewrite: {
      '^/api/getSomeInfo': ''
    }
  }
}
複製代碼

3.在代碼中調用封裝好的api

_getSomeInfo () {
  getSomeInfo().then((res) => {
    if (res.status === ERR_OK) {
      console.log(res.data) // 這樣就取到數據了
    }
  })
}
複製代碼

這樣的話在開發模式下就已經能夠實現跨域請求，可是這樣設置在打包上線後並不能實現跨域。（由於有的項目前端代碼和後臺代碼並不在一個服務器上），因此還有一種方法能夠解決上線後跨域的問題。

4.另外一種方法

在webpack.dev.conf.js中

const axios = require('axios') // 使用axios
const app = express()
const apiRoutes = express.Router() // 定義一個API的routes
app.use('/api', apiRoutes)

devServer: {
  // 在發送請求以前僞造refer,host
  before(app) {
    app.get('/getSomeInfo', function (req, res) {
      var url = 'https://xxxx' // 目標地址
      axios.get(url, {
        headers: {
          referer: 'https://xxxx', // 僞造referer
          host: 'xxx' // 僞造host
        },
        // params是即將與請求一塊兒發送的url參數，無格式對象/URLSearchParams對象
        params: req.query
      }).then((response) => {
        res.json(response.data)
      }).catch((e) => {
        console.log(e)
      })
    })
  }
}
複製代碼

而後調用api發送請求的方式和第一點相同。至此，就成功實現了利用反向代理實現跨域請求。