[問題探討]使用反向代理解決跨域請求

需求：使用反向代理解決跨域請求

一，跨域問題產生的原因

瀏覽器爲了保證用戶信息的安全，防止惡意的網站竊取數據，而引入了同源策略，對於以下非同源情況，都會禁止ajax請求：

1. 域名/IP不一致；
2. 端口號不一致；
3. 協議不同；
4. 二級域名不同。

二，使用反向代理解決跨域

目前比較通用的方法是CORS和反向代理，CORS對於前端小夥伴來說是一般無感的(某些特殊業務需求中使用低版本瀏覽器可能不支持CORS)，實現CORS的關鍵在於服務器，只要服務器實現CORS接口，就可以實現跨域通信。簡言之，CORS依賴後端，這確實有點不爽，今天我們來闡述通過反向代理由前端小夥伴們自己來解決跨域問題。

1，原理

通過使用web服務器，對其他服務器資源進行反向代理，對請求資源進行中轉，來/" 欺騙 "/瀏覽器，使瀏覽器感覺不到資源來自於其他服務器，以達到解決跨域的效果。

2，開發環境配置(vue爲例)

// 在config  index.js裏面配置如下代理
// 你的服務器地址+端口號比如 http://90.0.19.244:8068
  const API_SERVER = "http://90.0.19.244:8068"
  dev: {
    proxyTable: {
      '/api/**': {
        target: API_SERVER,
        changeOrigin: true,
        pathRewrite: { "^/api": "" }
      }
    },

3，測試/生產環境配置(nginx爲例)

// 在nginx服務器的配置文件(.conf)的server裏面增加配置
    location /api {
        rewrite ^.+api/?(.*)$ /$1 break;
        proxy_pass http://90.0.19.244:8068;
    }

關於配置裏面/api的說明：作爲一種保護機制，我們可以在請求url上增加base_url,以避免接口被隨意使用，如果不考慮這種機制，上面的/api可以直接改爲/，並同時需要去掉pathRewrite/rewrite相關配置。