React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題
更新時(shí)間：2022年12月06日 10:23:01 作者：牛先森家的牛奶
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
配置axios和代理
1、安裝axios 和 http-proxy-middleware（反向代理用）
npm i axios http-proxy-middleware -S
2、在src目錄下創(chuàng)建api文件夾，然后創(chuàng)建 index.ts 和 request.ts 文件
// request.ts
import axios from "axios"
declare module 'axios' {
export interface AxiosResponse<T = any> extends Promise<T> { }
}
export const Service = axios.create({
timeout: 3000, //延遲時(shí)間
baseURL: process.env.REACT_APP_BASE_API,
headers: {
"content-Type": "application/x-www-form-urlencoded",
},
})
//請(qǐng)求攔截
Service.interceptors.request.use((config) => config)
//響應(yīng)攔截
Service.interceptors.response.use(
(response) => response.data,
(err) => console.log(err)
)//index.ts
import { Service } from './request'
//獲取列表
export function getList(config: { page: string, limit: string }) {
const params = new URLSearchParams()
params.append('page', config.page)
params.append('limit', config.limit)
return Service({
method: 'get',
url: 'api/goodlist',
params
})
}3、配置代理，可以訪問到后臺(tái)的服務(wù)器地址，在config文件夾中創(chuàng)建setupProxy.js,內(nèi)容配置如下：
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use([process.env.REACT_APP_BASE_API], createProxyMiddleware({
target: 'http://localhost:5000/', // 后臺(tái)服務(wù)器地址
changeOrigin: true,
pathRewrite: {
['^' + process.env.REACT_APP_BASE_API]: '',
},
}))
}4、paths.js中修改proxySetup路徑，如下圖：
5、tsconfig.json文件更改include修改如下：
"include": [
"src",
"config/setupProxy.js"
]6、頁面調(diào)用接口：
import React, { useState, useEffect } from "react"
//導(dǎo)入要使用的接口
import { getList } from "../../api/index";
class About extends React.Component {
constructor(props: any) {
super(props)
this.state = {}
}
// 定義方法調(diào)接口
getList() {
getList({ page: "1", limit: "5" }).then((res) => console.log(res));
}
render() {
return (
<div className="about">
<button onClick={this.getList}>獲取數(shù)據(jù)</button>
</div>
)
}
}
export default About
接口調(diào)通返回?cái)?shù)據(jù)，效果如下：
proces.env環(huán)境配置
1、新建三個(gè)文件，根目錄下：
2、安裝dotenv-cli運(yùn)行命令
npm install dotenv-cli --save-dev
三個(gè)環(huán)境：
- 一個(gè)開發(fā)環(huán)境（development）
- 一個(gè)測(cè)試環(huán)境（test）
- 一個(gè)正式環(huán)境（production）
3、在package.json文件中配置命令：
"start": "node scripts/start.js", "build": "node --max_old_space_size=4096 scripts/build.js", "test": "node scripts/test.js", "build:dev": "dotenv -e .env.development node --max_old_space_size=4096 scripts/build.js", "build:prod": "dotenv -e .env.production node --max_old_space_size=4096 scripts/build.js", "build:test": "dotenv -e .env.test node --max_old_space_size=4096 scripts/build.js"
下面配置其中一個(gè).env.development環(huán)境：
NODE_ENV = 'development' # just a flag ENV = 'development' # base api 這里是代理的時(shí)候用到的 REACT_APP_BASE_API = '/dev'
注意點(diǎn)：
如果代理遇到接口404問題的話，看上面怎么解決的，通過process.env.REACT_APP_BASE_API去配置代理路徑，這樣的話，其他地方都不用改，打包后的接口里面也不會(huì)多前綴等一系列問題。
如果不是很清楚的話，可以參考我之前寫的vue代理404問題的文章：
Vue代理報(bào)錯(cuò)404問題（vue配置proxy）
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react實(shí)現(xiàn)電商商品列表的流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了如何基于react實(shí)現(xiàn)下拉刷新效果,在下拉的時(shí)候會(huì)進(jìn)入loading狀態(tài),文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
react如何使用useRef模仿抖音標(biāo)題里面添加標(biāo)簽內(nèi)容
本文介紹了如何模仿抖音發(fā)布頁面,使用div元素作為輸入框,并利用CSS樣式和JavaScript動(dòng)態(tài)操作DOM,實(shí)現(xiàn)類似于input輸入框的功能,感興趣的朋友跟隨小編一起看看吧2024-10-10
這篇文章主要介紹了React如何立即更新DOM問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了React-Native 環(huán)境搭建和基本介紹的相關(guān)資料,包括react native優(yōu)缺點(diǎn)，通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-04-04
在react中對(duì)less實(shí)現(xiàn)scoped配置方式
這篇文章主要介紹了在react中對(duì)less實(shí)現(xiàn)scoped配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了react ant design樣式覆蓋問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了React表中顯示JSON數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
當(dāng)我們要求渲染時(shí)間盡量快、頁面響應(yīng)速度快時(shí)就會(huì)用到服務(wù)端渲染，本篇文章主要介紹了React服務(wù)端渲染，有興趣的可以了解一下2017-07-07