一直也看到過proxyTable可以配置跨域，但是專案上都是統一交給後臺處理的，本人也懶，就一直沒管，最近換了專案，自己搭建的一套vue專案，發現配置這個的時候還出問題了，僅記錄一下。

在除錯api的過程中，發現報錯了：Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.，解釋：瀏覽器是會先發一次options請求，如果請求通過，則繼續傳送正式的post請求，而如果不通過則返回以上錯誤，最好的方法是後臺進行配置：

        // TODO 支援跨域訪問
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type");
        response.setHeader("Access-Control-Expose-Headers", "*");

        if (request.getMethod().equals("OPTIONS")) {
            HttpUtil.setResponse(response, HttpStatus.OK.value(), null);
            return;
        }

// 上面程式碼需要加入允許的頭部，content-type和access-token，
並且判斷請求的方法是options的時候，返回ok（200）給客戶端，
這樣才能繼續發正式的post請求。

 

其實前臺自己也是可以在開發環境中，自己配置的。在 config目錄下的index.js 中，

配置proxyTable，官網文件：https://vuejs-templates.github.io/webpack/proxy.html

當然我上面的寫法是對  /mro-web 介面的代理，我實際請求是對axios進行封裝

這樣我實際請求的時候，就相當於將 http:.// xxxx 請求轉為和自己本地域名一致的請求

'http://localhost:8080/wro-web/xxx' ===> 'http://伺服器域名/wro-web/xxx'

個人覺得原理就是：我們的本地伺服器將請求轉發給了目標伺服器。而出行跨域的問題報錯是因為瀏覽器有同源策略的限制，但伺服器是沒有的。

借鑑一位網友的理解：

本地伺服器 –》 代理 –》目標伺服器 –》拿到資料後通過代理偽裝成本地服務請求的返回值 —》然後瀏覽器就順利收到了我們想要的資料