Axios에서 헤더와 옵션을 설정하려면 어떻게 해야 합니다.
Axios를 사용하여 다음과 같은 HTTP 투고를 수행합니다.
import axios from 'axios'
params = {'HTTP_CONTENT_LANGUAGE': self.language}
headers = {'header1': value}
axios.post(url, params, headers)
이거 맞는건가요?아니면 어떻게 해야 하나요?
axios.post(url, params: params, headers: headers)
여기에는 몇 가지 방법이 있습니다.
단일 요청의 경우:
let config = { headers: { header1: value, } } let data = { 'HTTP_CONTENT_LANGUAGE': self.language } axios.post(URL, data, config).then(...)기본 글로벌 구성을 설정하는 경우:
axios.defaults.headers.post['header1'] = 'value' // for POST requests axios.defaults.headers.common['header1'] = 'value' // for all requestsAxios 인스턴스에서 기본값으로 설정하는 경우:
let instance = axios.create({ headers: { post: { // can be common or any other method header1: 'value1' } } }) //- or after instance has been created instance.defaults.headers.post['header1'] = 'value' //- or before a request is made // using Interceptors instance.interceptors.request.use(config => { config.headers.post['header1'] = 'value'; return config; });
헤더로 get 요구를 송신할 수 있습니다(예를 들어 jwt를 사용한 인증용).
axios.get('https://example.com/getSomething', {
headers: {
Authorization: 'Bearer ' + token //the token is a variable which holds the token
}
})
또, 포스트 리퀘스트를 송신할 수도 있습니다.
axios.post('https://example.com/postSomething', {
email: varEmail, //varEmail is a variable which holds the email
password: varPassword
},
{
headers: {
Authorization: 'Bearer ' + varToken
}
})
내 방법은 다음과 같은 요청을 하는 거야
axios({
method: 'post', //you can set what request you want to be
url: 'https://example.com/request',
data: {id: varID},
headers: {
Authorization: 'Bearer ' + varToken
}
})
axios.post('url', {"body":data}, {
headers: {
'Content-Type': 'application/json'
}
}
)다음과 같이 설정 개체를 악시에 전달할 수 있습니다.
axios({
method: 'post',
url: '....',
params: {'HTTP_CONTENT_LANGUAGE': self.language},
headers: {'header1': value}
})
올바른 방법은 다음과 같습니다.
axios.post('url', {"body":data}, {
headers: {
'Content-Type': 'application/json'
}
}
)이것은 헤더와 응답이 있는 설정의 간단한 예입니다.유형:
var config = {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob'
};
axios.post('http://YOUR_URL', this.data, config)
.then((response) => {
console.log(response.data);
});
Content-Type은 'application/x-www-form-urlencoded' 또는 'application/json'일 수 있으며 'application/json;charset=utf-8'도 작동할 수 있습니다.
responseType은 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'일 수 있습니다.
이 예에서는, this.data 가 송신하는 데이터입니다.값 또는 어레이일 수 있습니다.(오브젝트를 송신하려면 , 그 오브젝트를 시리얼화할 필요가 있습니다.
헤더를 할 수 .axios.defaults.headers
axios.defaults.headers = {
'Content-Type': 'application/json',
Authorization: 'myspecialpassword'
}
axios.post('https://myapi.com', { data: "hello world" })
.then(response => {
console.log('Response', response.data)
})
.catch(e => {
console.log('Error: ', e.response.data)
})
params 및 header로 get request를 수행할 경우 사용합니다.
var params = {
paramName1: paramValue1,
paramName2: paramValue2
}
var headers = {
headerName1: headerValue1,
headerName2: headerValue2
}
Axios.get(url, {params, headers} ).then(res =>{
console.log(res.data.representation);
});한 헤더를 모든 헤더로 도 있습니다.axios★★★★
// Add a request interceptor
axios.interceptors.request.use(function (config) {
config.headers.Authorization = 'AUTH_TOKEN';
return config;
});
두 번째 방법
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';
이 코드를 사용해 보세요.
예를 들어 코드 use axios get rest API 입니다.
말을 타고
mounted(){
var config = {
headers: {
'x-rapidapi-host': 'covid-19-coronavirus-statistics.p.rapidapi.com',
'x-rapidapi-key': '5156f83861mshd5c5731412d4c5fp18132ejsn8ae65e661a54'
}
};
axios.get('https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?
country=Thailand', config)
.then((response) => {
console.log(response.data);
});
}
희망은 도움이다.
나는 이 문제를 포스트 리퀘스트에서 직면했다.악시오스 헤더는 이렇게 바뀌었습니다.잘 되고 있어요.
axios.post('http://localhost/M-Experience/resources/GETrends.php',
{
firstName: this.name
},
{
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
는 ★★★★★★★★★★★★★★★★★★★★★★.fd=new FormData()하여 ""를 합니다.[.append()][1] errordjango API 메서드가 됩니다.400달러제 백엔드에서 프로파일 이미지는 사용자 모델에 대한 OneToOne 관계를 통해 관련지어집니다.따라서 이 오브젝트는 네스트된 오브젝트로 시리얼화되며 put 요구가 동작할 것으로 예상됩니다.
에 대한 모든 은, 「」로 .this.setState i. 이라고 생각합니다.handle Submit(제출)을 실행합니다.
우선 나의 공리들은 다음과 같이 요청한다.
export const PutUser=(data)=>(dispatch,getState)=>{
dispatch({type: AUTH_USER_LOADING});
const token=getState().auth.token;
axios(
{
¦ method:'put',
¦ url:`https://<xyz>/api/account/user/`,
¦ data:data,
¦ headers:{
¦ ¦ Authorization: 'Token '+token||null,
¦ ¦ 'Content-Type': 'multipart/form-data',
¦ }
})
¦ .then(response=>{
¦ ¦ dispatch({
¦ ¦ ¦ type: AUTH_USER_PUT,
¦ ¦ ¦ payload: response.data,
¦ ¦ });
¦ })
¦ .catch(err=>{
¦ ¦ dispatch({
¦ ¦ ¦ type:AUTH_USER_PUT_ERROR,
¦ ¦ ¦ payload: err,
¦ ¦ });
¦ })
}
my handleSubmit 메서드는 다음과 같은 json 개체를 생성해야 합니다. 여기서 이미지 속성은 실제 사용자 입력으로 대체됩니다.
user:{
username:'charly',
first_name:'charly',
last_name:'brown',
profile:{
image: 'imgurl',
}
}
컴포넌트 내 handleSumit 메서드는 다음과 같습니다.추가 체크
handleSubmit=(e)=>{
¦ e.preventDefault();
¦ let fd=new FormData();
¦ fd.append('username',this.state.username);
¦ fd.append('first_name',this.state.first_name);
¦ fd.append('last_name',this.state.last_name);
¦ if(this.state.image!=null){fd.append('profile.image',this.state.image, this.state.image.name)};
¦ this.props.PutUser(fd);
};
비동기/대기 사용
Axios 투고 서명
post(url: 문자열, 데이터): any, config? :AxiosRequestConfig) :약속<Axios Response > 데이터와 설정은 모두 옵션입니다.
AxiosRequestConfig는http://https://github.com/axios/axios/blob/e462973a4b23e9541efe3e64ca120ae9111a6ad8/index.d.ts#L60 를 참조해 주세요.
....
....
try {
....
....
const url = "your post url"
const data = {
HTTP_CONTENT_LANGUAGE: self.language
}
const config = {
headers: {
"header1": value
},
timeout: 1000,
// plenty more options can be added, refer source link above
}
const response = await axios.post(url, data, config);
// If Everything's OK, make use of the response data
const responseData = response.data;
....
....
}catch(err){
// handle the error
if(axios.isAxiosError(err){
....
....
}
}
@user2950593 당신의 Axios 요구가 맞습니다.서버 측에서 사용자 지정 헤더를 허용해야 합니다.api를 php로 설정하면 이 코드가 작동합니다.
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD");
header("Access-Control-Allow-Headers: Content-Type, header1");
서버측에서 커스텀헤더를 허용하면, Axios 요구는 정상적으로 동작하기 시작합니다.
언급URL : https://stackoverflow.com/questions/45578844/how-to-set-header-and-options-in-axios
'IT' 카테고리의 다른 글
| sleep()의 JavaScript 버전은 무엇입니까? (0) | 2022.11.07 |
|---|---|
| 필드 이름 주위에 백틱 사용 (0) | 2022.11.07 |
| 어떤 클래스가 다른 클래스의 서브 클래스인지(런타임 시) 확인하려면 어떻게 해야 합니까? (0) | 2022.10.30 |
| Java 콜 스택의 최대 깊이는 얼마입니까? (0) | 2022.10.30 |
| PHP cURL HTTP PUT (0) | 2022.10.30 |