Hoe de koptekst en opties in axios in te stellen?

Ik gebruik Axios om een HTTP-bericht als volgt uit te voeren:

import axios from 'axios'
params = {'HTTP_CONTENT_LANGUAGE': self.language}
headers = {'header1': value}
axios.post(url, params, headers)

Is dit correct? Of moet ik doen:

axios.post(url, params: params, headers: headers)

Antwoord 1, autoriteit 100%

Er zijn verschillende manieren om dit te doen:

  • Voor een enkel verzoek:

    let config = {
      headers: {
        header1: value,
      }
    }
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    axios.post(URL, data, config).then(...)
    
  • Voor het instellen van de standaard globale configuratie:

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
    
  • Voor instelling als standaard op axios-instantie:

    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;
    });
    

Antwoord 2, autoriteit 53%

Je kunt een get-verzoek sturen met Headers (voor authenticatie met jwt bijvoorbeeld):

axios.get('https://example.com/getSomething', {
 headers: {
   Authorization: 'Bearer ' + token //the token is a variable which holds the token
 }
})

Ook kunt u een bericht verzenden.

axios.post('https://example.com/postSomething', {
 email: varEmail, //varEmail is a variable which holds the email
 password: varPassword
},
{
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

Mijn manier van doen, is om een ​​dergelijke aanvraag in te stellen:

axios({
  method: 'post', //you can set what request you want to be
  url: 'https://example.com/request',
  data: {id: varID},
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

Antwoord 3, Autoriteit 14%

axios.post('url', {"body":data}, {
    headers: {
    'Content-Type': 'application/json'
    }
  }
)

Antwoord 4, Autoriteit 8%

U kunt een config-object doorgeven aan Axios zoals:

axios({
  method: 'post',
  url: '....',
  params: {'HTTP_CONTENT_LANGUAGE': self.language},
  headers: {'header1': value}
})

Antwoord 5, Autoriteit 6%

Hier is de juiste manier: –

axios.post('url', {"body":data}, {
    headers: {
    'Content-Type': 'application/json'
    }
  }
)

Antwoord 6, Autoriteit 5%

Dit is een eenvoudig voorbeeld van een configuratie met headers en responseetype:

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);
});

Inhoudstype kan ‘applicatie / x-www-form-urlencodeed’ of ‘applicatie / json’ zijn
en het kan ook werken ‘applicatie / json; charset = UTF-8’

Responsetype kan ‘Arraybuffer’, ‘Blob’, ‘Document’, ‘JSON’, ‘Tekst’, ‘Stream’

zijn

In dit voorbeeld is dit.data de gegevens die u wilt verzenden. Het kan een waarde of een array zijn. (Als u een object wilt verzenden, moet u het waarschijnlijk serialiseren)


Antwoord 7, Autoriteit 3%

U kunt een standaardkop initialiseren 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)
        })

Antwoord 8, Autoriteit 3%

Als u een vraag wilt uitvoeren met paramets en headers.

var params = {
  paramName1: paramValue1,
  paramName2: paramValue2
}
var headers = {
  headerName1: headerValue1,
  headerName2: headerValue2
}
 Axios.get(url, {params, headers} ).then(res =>{
  console.log(res.data.representation);
});

Antwoord 9, autoriteit 2%

probeer deze code

gebruik in voorbeeldcode axios get rest API.

in gemonteerd

 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);
  });
}

Hoop is hulp.


Antwoord 10, autoriteit 2%

Je kunt ook geselecteerde headers instellen voor elk axios-verzoek:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    config.headers.Authorization = 'AUTH_TOKEN';
    return config;
});

Tweede methode

axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';

Antwoord 11

Ik heb met dit probleem te maken gehad in een postverzoek. Ik ben zo veranderd in axios header. Het werkt prima.

axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

Antwoord 12

Ik moest een fd=new FormData()Object maken en de [.append()][1]methode toe voordat u deze door Axios naar mijn Django verzendt API, anders ontvang ik een 400 fout.
In mijn backend.nl is het profielbeeld gerelateerd via een metoon-relatie met het gebruikersmodel. Daarom wordt het geserialiseerd als een genesteld object en verwacht dit voor het opzetaanvraag.

Alle wijzigingen in de staat binnen de frontend worden uitgevoerd met de this.setState-methode. Ik geloof dat belangrijk onderdeel aan het einde de handlesubmit-methode is.

EERSTE MIJN AXIOS SPEED VERZOEK:

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-methode moet het volgende JSON-object maken, waarbij het beeldattribuut wordt vervangen door de werkelijke gebruikersinvoer:

user:{
username:'charly',
first_name:'charly',
last_name:'brown',
profile:{
image: 'imgurl',
  }
}

Hier is mijn handlesumit-methode in de component:
Controleer toevoegen

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);                                                                                                                                                                                                                                
}; 

Antwoord 13

@ user2950593
Uw AXIOS-aanvraag is correct. U moet uw aangepaste headers op serverzijde toestaan.
Als u uw API in PHP hebt, werkt deze code voor u.

header("Access-Control-Allow-Origin: *");   
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD");
header("Access-Control-Allow-Headers: Content-Type, header1");

Nadat u uw aangepaste headers op de server kunt toestaan, beginnen uw AXIOS-aanvragen goed te werken.

Other episodes