本文主要介紹了詳解webpack-dev-server使用http-proxy解決跨域問題,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
文件資料
##webpack關於webpack-dev-server開啟proxy的官方介紹設定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 } } }, ...此处省略一万字 };
呼叫介面
為了方便起見,以下使用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'
上述程式碼與「呼叫介面」 中使用$.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对象
#
以上是webpack-dev-server使用http-proxy解決跨域問題詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!