모든 http 콜에서 디폴트 요구 헤더의 액시오 설정을 작성하려면 어떻게 해야 합니까?
https://github.com/MrFiniOrg/AxiosQuestion
모든 http 호출에 동일한 요청 헤더를 지정하지 않아도 되도록 프로젝트를 셋업하고 싶습니다.
인터넷에서 검색해 봤지만 프로젝트에서는 이 일을 할 수 없었습니다.
제가 안고 있는 문제를 해결할 수 있도록 누군가 도와주실 수 있을까요?나는 반응과 공리들을 처음 해보는 사람이고 이것을 어떻게 구성해야 할지 잘 모르겠다.
제 프로젝트는 이렇게 하는 것 같은데 요청을 두 번 보냅니다.하나는 머리글이 있고 하나는 머리글이 없습니다.
내 Axios 호출은 app.js 클래스 컴포넌트에서 찾을 수 있습니다.
모든 요구에 적용되는 Configuration 기본값을 지정할 수 있습니다.
글로벌 공리 기본값
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
자세한 내용은 해당 문서를 참조하십시오.
갱신:
다음 두 가지 방법으로 수행할 수 있습니다.
1. 고객님의index.jsfile [root' 파일을 합니다.request/ response거 요.다음과 같이 합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import axios from 'axios';
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'AUTH TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.interceptors.request.use(request => {
console.log(request);
// Edit request config
return request;
}, error => {
console.log(error);
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
console.log(response);
// Edit response config
return response;
}, error => {
console.log(error);
return Promise.reject(error);
});
ReactDOM.render( <App />, document.getElementById( 'root' ) );
registerServiceWorker();
2. 또는 새로운 파일, 새로운 인스턴스의axios.js정확하게 파일을 작성하고 필요한 컴포넌트에 구성을 개별적으로 Import합니다.예를 들어 이름을 붙이고 그 안에 특정 설정을 넣을 수 있습니다.다음과 같은 경우:
axiosConfig.js
// First we need to import axios.js
import axios from 'axios';
// Next we make an 'instance' of it
const instance = axios.create({
// .. where we make our configurations
baseURL: 'https://api.example.com'
});
// Where you would set stuff like your 'Authorization' header, etc ...
instance.defaults.headers.common['Authorization'] = 'AUTH TOKEN FROM INSTANCE';
// Also add/ configure interceptors && all the other cool stuff
instance.interceptors.request...
export default instance;
그런 다음 이 파일을 필요한 컴포넌트에 Import하여 다음과 같이 이전 Axios [node_modules] Import 대신 사용합니다.
Example.js
import React, { Component } from 'react';
// import axios from 'axios'; We don't need this anymore
import axiosConfig from '../../axiosConfig'; // But instead our new configured version :)
class Example extends Component {
state = {
data: [],
error: false
}
componentDidMount () {
// We could name (import) it as axios instead, but this makes more sense here ...
axiosConfig.get('/posts' )
.then(response => {
this.setState({data: response});
});
})
.catch(error => {
this.setState({error: true});
});
}
메모: 필요에 따라 이 두 가지 방법을 조합할 수 있지만, 에서 작성한 구성은configAxios.js your those file file file file your file file made those those those の those those those those those those file를 .index.js즉file [파일]
대행 수신기를 사용하면 각 요청에서 실행되므로 토큰이 변경(새로 고침)되면 다음 요청에서 새 토큰이 선택됩니다.헤더 덮어쓰기를 허용하려면 요청에 기존 값이 있는지 확인합니다.로컬 스토리지에서 토큰 생성기를 사용하고 토큰을 업데이트한다고 가정해 보십시오.여기서는 localStorage에 저장되어 있는keyclock 객체를 사용하고 있습니다.
import * as axios from "axios";
axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;
axios.interceptors.request.use(
config => {
if (!config.headers.Authorization) {
const token = JSON.parse(localStorage.getItem("keyCloak")).token;
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
}
return config;
},
error => Promise.reject(error)
);
저도 같은 문제를 안고 있었습니다.해결방법은 그 장소를 찾아내는 것이었습니다.index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import axios from 'axios';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import App from './components/app/App';
import * as serviceWorker from './serviceWorker';
axios.defaults.baseURL = process.env.REACT_APP_BE_URL;
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
serviceWorker.unregister();
저는 ,, 는을 사용합니다..env「 」( 「 」)의 URL:
.env.실가동
REACT_APP_BE_URL=http://production-url-to-backend/
.env.개발
REACT_APP_BE_URL=http://localhost:3000/
로컬에서 .env.development를 실행하면 실제 가동 빌드에 사용됩니다.npm run build).env.production 이 사용됩니다.
- axios 글로벌 컨피규레이션에 대한 자세한 내용은http://https://github.com/axios/axios#global-axios-defaults 를 참조하십시오.
- 상세 정보
.env: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
파일(여기 설명)에 넣은 후 최상위 수준으로 가져올 수 있습니다.
import { CssBaseline } from "@mui/material";
import "./App.css";
import ProfilePage from "./view/Profile/ProfilePage";
import "./service/axios-config"; //<---import it here
function App() {
return (
<div className="App">
<CssBaseline />
<ProfilePage />
</div>
);
}
export default App;
이 코드를 최상위 레벨에 추가하는 대신:
axios.defaults.baseURL = process.env.REACT_APP_BE_URL;
요청 헤더의 Axios 구성을 설정하는 간단한 미니멀리즘 방법이 있으며 글로벌 오류를 처리합니다.
import axios, { AxiosError, AxiosHeaders } from "axios";
import useAuthStore from "../hooks/useAuthStore";
import { BASE_URL } from "./config";
import { getItem } from "./storage";
const axiosInstance = axios.create({
baseURL: `${BASE_URL}`,
headers: {
"Access-Control-Allow-Origin": "*",
},
});
axiosInstance.interceptors.request.use(
async (config) => {
const token = await getItem("jwtToken");
if (config.headers)
(config.headers as AxiosHeaders).set("Authorization", `Bearer
${token}`);
return config;
},
(error) => Promise.reject(error),
);
axiosInstance.interceptors.response.use(
(response) => response,
(error) => {
if (error instanceof AxiosError && error.response?.status === 401)
{
useAuthStore.setState({ signedInAs: undefined });
}
return Promise.reject(error);
},
);
export default axiosInstance;
주의: 기본 URL은 다른 파일에서 Import되지만 useAuthStore는 사용자 상태를 인가를 위해 저장하는 zustand의 커스텀훅입니다.
언급URL : https://stackoverflow.com/questions/51794553/how-do-i-create-configuration-for-axios-for-default-request-headers-in-every-htt
'programing' 카테고리의 다른 글
| isPresent 메서드와 isDisplayed 메서드의 차이점은 무엇입니까? (0) | 2023.03.18 |
|---|---|
| 상속된 개체를 JSON으로 문자열화하는 방법 (0) | 2023.03.18 |
| ui-grid에서 새로 고침 방법을 사용하는 방법 (0) | 2023.03.18 |
| wp_enqueue_style이 CSS를 로드하지 않았습니다. (0) | 2023.03.18 |
| C#에서의 JSON 어레이 작성 (0) | 2023.03.18 |