關(guān)于react的代理配置(可配置多個代理)
react的代理配置
第一種寫在package.json中(不推薦)
代碼中使用3000的端口訪問, 例如如下:
// 創(chuàng)建并暴露App export default class App extends Component{ getData = () => { axios.get('http://localhost:3000/api/info').then( response => {console.log('成功', response.data);}, error => {console.log('失敗',error);} ) } render(){ return ( <div> <Hello></Hello> <Welcome></Welcome> <button onClick={this.getData}>點我請求數(shù)據(jù)</button> </div> ) } }
- 優(yōu)點:配置簡單,前端請求資源時可以不加任何前綴。
- 缺點:不能配置多個代理。
- 工作方式:上述方式配置代理,當請求了3000不存在的資源時,那么該請求會轉(zhuǎn)發(fā)給5000 (優(yōu)先匹配前端資源)
第二種 建立 setupProxy.js,注意必須是這個文件名
在src同級目錄創(chuàng)建setupProxy.js;
注意:這個文件里面需要用commonjs寫法,不能使用ES6用法,react會找到這個文件并把它添加到webpack配置中;
setupProxy.js文件中代碼如下:
const proxy = require('http-proxy-middleware')module.export = function(app){ app.use( // 代理api 下面再把 /api 替換為空字符串 因為路徑里面沒有 /api proxy('/api1', { // 遇見 /api1 前綴的請求 就會觸發(fā)該代理配置 target: 'http://localhost:5000', // 請求轉(zhuǎn)發(fā)給誰 changeOrigin: true, // 控制服務(wù)器接收到的請求頭Host的值 // 重新請求路徑 把 /api1 替換為空字符串 必須加 pathRewrite:{'^/api1' : ''} }), proxy('/api2', { // 遇見 /api2前綴的請求 就會觸發(fā)該代理配置 target: 'http://localhost:5001', changeOrigin: true, // 把api 替換為空字符串 pathRewrite:{'^/api2' : ''} }), ) }
項目頁面中調(diào)接口使用:
// 創(chuàng)建并暴露App export default class App extends Component{ getDataOne = () => { axios.get('http://localhost:3000/api1/info').then( response => {console.log('成功', response.data);}, error => {console.log('失敗',error);} ) } getDataTwo = () => { axios.get('http://localhost:3000/api2/car').then( response => {console.log('成功', response.data);}, error => {console.log('失敗',error);} ) } render(){ return ( <div> <Hello></Hello> <Welcome></Welcome> <button onClick={this.getDataOne}>點我請求數(shù)據(jù)1</button> <button onClick={this.getDataTwo}>點我請求數(shù)據(jù)2</button> </div> ) } }
優(yōu)點:可以配置多個代理,可以靈活的控制請求是否走代理。
缺點:配置繁瑣,前端請求資源時必須加前綴。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
react頁面中存在多個input時巧妙設(shè)置value屬性方式
這篇文章主要介紹了react頁面中存在多個input時巧妙設(shè)置value屬性方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05React useImperativeHandle處理組件狀態(tài)和生命周期用法詳解
React Hooks 為我們提供了一種全新的方式來處理組件的狀態(tài)和生命周期,useImperativeHandle是一個相對較少被提及的Hook,但在某些場景下,它是非常有用的,本文將深討useImperativeHandle的用法,并通過實例來加深理解2023-09-09React通過redux-persist持久化數(shù)據(jù)存儲的方法示例
這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02