溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在前端調試的時候，跨域一直都是一個比較麻煩的問題，這個在之前的文章 關于跨域問題的一個解決方法 中其實已經討論了一些可以使用的方法。
如果要使用 JSONP，第一是需要修改的地方比較多，而且也不太符合前端發展的大趨勢，如果使用 CORS 的話并沒有 application/json 類型。而且更重要的是這只是在前端調試時候的需求，并不是在上線以后的需求，所以對后端有太多的入侵也不好。
所以就有一個念想突然在大腦中閃過——加入有一個代理不就可以解決這個問題了？但是又想了一下寫起來還挺麻煩，于是就被擱置了。
直到前幾天 Stone 提到其實 webpack-dev-server 早就想到并且已經幫我們實現了。
于是，我就在一個 Vue 項目中進行測試，發現真的很贊，既可以本地 Server 熱加載，還可以直接跨域調用遠程 API，完美解決了之前遇到的所有問題。
接下來我簡要介紹一下步驟（以一個 Vue 腳手架建立的 webpack 項目為例）：
首先檢查 build/webpack.dev.conf.js 中是否有
proxy: config.dev.proxyTable,
這個配置項，如果被注釋掉，請打開注釋，如果沒有，請加入到 devServer 對象中
然后在 config/index.js 中的 dev 對象中加入 proxyTable 配置項：
proxyTable: {
'/**': {
target: 'http://api.xxx.com',
changeOrigin: true,
secure: false
}
},
前面的鍵 /** 意思是代理所有請求，如果代理某些請求，可以將其改為諸如 /api 之類的字符串。
后面的 target 就是要代理到的網站，changeOrigin 的意思就是把 http 請求中的 Origin 字段進行變換，在瀏覽器接收到后端回復的時候，瀏覽器會以為這是本地請求，而在后端那邊會以為是在站內的調用。
這樣，通過這個簡單的配置，就完美地解決了跨域的問題。
之后，在直接運行
npm run dev
的時候，就可以將測試前端中的 ajax 請求代理到后端服務器進行測試啦！
最后，貼上官方文檔，具體的配置大家可以參考這里：
https://webpack.js.org/configuration/dev-server/#devserver-proxy
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
