這篇文章主要介紹了詳解webpack-dev-server使用http-proxy解決跨域問題,現在分享給大家,也給大家做個參考。
文件資料
webpack關於webpack-dev-server開啟proxy的官方介紹
Vue-cli proxyTable 解決開發環境的跨域問題— —雖然這篇是寫vue的,不過用在webpack-dev-server上也是一樣的
http-proxy-middleware——webpack-dev-server的實作方法其實是對這個的封裝
設定http-proxy
在webpack的設定檔(webpack.config.js)中進行設定
module.exports = { ...此处省略一万字 // webpack-dev-server的配置 devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, port: 3000, host: '10.0.0.9', proxy: { '/test/*': { target: 'http://localhost', changeOrigin: true, secure: false } } }, ...此处省略一万字 };
上述設定中,關於http-proxy的只是proxy: {...} 中的值
呼叫介面
#為了方便起見,下面使用jquery封裝好的ajax函數進行示範
$.ajax({ // url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行 url: '/test/testFetch/Login.php', // 这样行 type: 'post', data: { app_id: '13751313169', password: '123456', user_name: 'Nicholas' }, success: function(data) { console.log(data); } });
proxy中的部分參數說明
'/test/*' 以及target: 'http://localhost'
從名字就能看出,這個其實是將匹配'/test/*' 這種格式的API的網域重定向為'http://localhost'
#結合上面的「呼叫介面」可以看出, url: '/test/testFetch/Login.php' 這句,其實會自動補充前綴,也就是說,url: '/test/testFetch/Login.php' 等價於url: 'http:// 10.0.0.9:3000/test/testFetch/Login.php'
但是,我們使用了http-proxy進行重定向,這樣的話,url: '/test/testFetch/Login .php' 等價於url: 'http://localhost/test/testFetch/Login.php'
#changeOrigin
true/false, Default: false - changes the origin of the host header to the target URL
本地會虛擬一個服務端接收你的請求並代你發送該請求-這個是別人的說法
我試了一下,就算這個參數設定成false 也有部分情況是可以的,具體原因不詳,所以還是將其設為true 吧
secure
#true/false, if you want to verify the SSL Certs
#pathRewrite
範例: pathRewrite: {'^/api': ''}
# Object-keys will be used as RegExp to match paths
我猜,這裡是將'^/api' 使用'' 代替(只是我猜,沒是成功,估計是我的正規表示式寫得不行)
附上使用Fetch API的程式碼
上述程式碼與「呼叫介面」中使用$. ajax() 實現的效果是一樣的
let testAsync = async function () { var feeling = { app_id: '13751313169', password: '123456', user_name: 'Nicholas' }; var fetchParams = { method: 'post', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, credentials: 'include', // 将凭证也带上(例如cookies) body: JSON.stringify(feeling), }; let temp = await fetch('/test/testFetch/Login.php', fetchParams).then(response => response.text()); console.log(temp); // 这个就是一个json对象 return temp; }; let data = testAsync(); // async函数返回值是一个Promise对象 console.log(data); // 这个是一个Promise对象
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
在VueJs中如何監聽window.resize具體該怎麼實現?
React-native橋接Android如何實現,具體步驟又是什麼?
以上是在webpack-dev-server中如何使用http-proxy(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!