前端開發：深刻使用proxy代理解決跨域問題

在前端領域裏面，跨域指的是瀏覽器容許向服務器發送跨域請求，進而克服Ajax只能同源使用的侷限性限制。同源策略是一種約定，並且是瀏覽器中最基本也是最核心的安全功能，若缺乏了該策略，瀏覽器很是容易被攻擊；同源就是指「協議+域名+端口」都同樣，就算有兩個不一樣域名指向同一個IP地址也不能是同源。同源策略只有在瀏覽器中存在，服務器中確不存在，因此遇到須要跨域請求的地址將其轉發服務器後委託服務器去請求便可。

1、實際開發中遇到的跨域問題解決方法
先來舉一個簡單的例子說明一下：
首先來看一下跨域引發的報錯提示：

解決步驟：打開Vue項目，而後在項目中找到config文件夾裏面的index.js文件，而後找到proxyTable，而後添加如下代碼段便可：

proxyTable: {
      ['/java/mgr-auth']: {  //替換代理地址名稱
        target: 'http://dev-cloud.bc.com/mgr-auth', //代理地址
        changeOrigin: true, //能否跨域
        pathRewrite: {
          ['^/java/mgr-auth']: '', //重寫接口，去掉/java/mgr-auth
        }
      }
}

設置完畢以後，重啓一下服務，根據實際狀況重啓項目: npm run serve或者是npm run dev。


重啓項目以後，在接口封裝和調用那裏進行設置，最後就能夠正常訪問接口，跨域問題隨之解決。
2、常見的跨域情形
常見的跨域情形經過URL連接來區分主要有6種：
①同域名，不一樣端口；②同域名，不一樣文件或者路徑；③同域名，不一樣協議；④域名和域名對應相同的IP；⑤主域名相同，子域名不一樣；⑥不一樣域名。
3、跨域解決方法彙總
解決跨域問題，通常能夠經過三種方式來解決：①前端項目配置代理；②服務端配置跨域訪問；③使用Chrome的擴展插件。
一、前端項目配置代理的方法解決跨域問題
經過前端項目配置代理的方法解決跨域問題，具體步驟參考文章開頭的案例來解決。
二、服務端配置跨域訪問的方法解決跨域問題
這個須要在服務端進行配置，具體操做設計後臺操做，這裏再也不具體講解。
三、經過Chrome的擴展插件的方法解決跨域問題
搜索使用Allow CORS: Access-Control-Allow-Origin便可，若是不能正常搜到，請聯繫本做者來爲你解答。
4、代理類型
常見的代理類型大概有四種：①基本代理；②重寫路徑代理；③支持HTTPS的代理；④把請求代理到同一目標的代理。
一、基本代理的實例

module.exports = {
  dev: {
  proxy: {
   '/api': 'http://localhost:8080’
  }
 }
};

二、重寫路徑代理的實例

module.exports = {
  dev: {
   proxy: {
   '/api': {
    target: 'http://localhost:8080’,
    pathRewrite: {'^/api' : ''}
  }
}
}
};

三、支持HTTPS代理的實例

module.exports = {
  dev: {
   proxy: {
    '/api': {
   target: 'https://dev-cloud.cc.com',
   secure: false
 }
 }
}
};

四、請求代理到同一目標的代理的實例

module.exports = {
 dev: {
  proxy: [{
 context: ['/auth', '/api'],
 target: 'http://localhost:8080’,
  }]
 }
};

以上就是本章所有內容，歡迎關注三掌櫃的微信公衆號「程序猿by三掌櫃」，三掌櫃的新浪微博「三掌櫃666」，歡迎關注！