electron-vue項目中開發環境中的axios跨域問題

前言

　　上一篇總結了前端對 axios 的理解和常見的項目中的封裝使用方法，這期記錄一下 electron-vue 項目中開發環境下解決 http 、https請求跨域的問題。

正文

　　1.為什么有跨域的存在？

　　前后端分離的一種開發模式下，在前端客戶端向服務端發送 ajax 請求的時候受到同源策略的限制，因為 ajax是基於http 協議的異步 JavaScript 和 XML,是一種用於前后端數據交互的技術，從而實現網頁異步更新，而 http 又受到同源策略的限制。因此產生了跨域的問題。

　　同源策略實質指 "協議+域名+端口號"三者相同，三者缺一不可。

　　當然也存在一些不受同源策略限制的情況，如下：

　　（1）script 標簽允許跨域嵌入腳本，因此不受跨域限制。

　　（2）img 、link 標簽、@font-face 不受跨域影響。

　　（3）video 和 audio 嵌入的資源不受跨域影響。

　　（4）iframe 載入的任何資源不受跨域限制。

　　（5）object 、embed 和 applet 插件不受同源限制。

　　（6） websocket 協議通信不受同源限制，只要服務器支持就可以實現跨域通信。

　　2.常見的跨域解決方法總結？

　　（1）基於 JSONP 技術實現跨域。

　　（2）CORS--跨域資源共享。

　　（3）使用代理服務器轉發請求。

　　3.electron-vue 項目開發環境如何解決跨域？

　　上一篇在項目中封裝 axios 的時候設置了baseUrl，要解決開發環境中跨域問題，只需要對該 url 在devServer 中設置服務代理即可。

　　在electron-vue 項目中需要找到dev-runner.js文件。

　　在該文件中找到 WebpackDevServer，里面添加服務代理，代碼如下:

      const server = new WebpackDevServer(compiler, {
      contentBase: path.join(__dirname, "../"),
      quiet: true,
      proxy: {
        "/api": {
          // 請求的目標服務器地址
          target: "http://xxx.xxxxxx/",
          // 如果是https接口，需要配置這個參數
          secure: false,
          // 設置允許跨域
          changeOrigin: true,
          // 重寫路徑
          pathRewrite: {
            "^/api": "",
          },
          headers: {
            referer: "",
          },
        },
      },
      before(app, ctx) {
        app.use(hotMiddleware);
        ctx.middleware.waitUntilValid(() => {
          resolve();
        });
      },
    });

　　這樣就實現了前端通過服務代理解決跨域的問題，在頁面就可以正常請求到服務端數據。

總結

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。