标签: axios

如何通过axios.js发送带有令牌的身份验证标头？我尝试了一些没有成功的事情,例如:

const header = `Authorization: Bearer ${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });

给我这个错误:

XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.

我设法通过设置全局默认设置来使其工作,但我猜这不是单个请求的最佳选择:

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

更新:

科尔的回答帮助我找到了问题所在.我正在使用django-cors-headers中间件,默认情况下已经处理了授权头.

但我能够理解错误消息并修复了我的axios请求代码中的错误,这应该是这样的

return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });

我有一个react/redux应用程序从api服务器获取令牌.在用户进行身份验证之后,我想让所有axios请求都将该令牌作为Authorization标头,而不必手动将其附加到操作中的每个请求.我是新手反应/ redux并不确定最好的方法,并没有在谷歌上找到任何质量点击.

这是我的redux设置:

// actions.js
import axios from 'axios';

export function loginUser(props) {
  const url = `https://api.mydomain.com/login/`;
  const { email, password } = props;
  const request = axios.post(url, { email, password });

  return {
    type: LOGIN_USER,
    payload: request
  };
}

export function fetchPages() {
  /* here is where I'd like the header to be attached automatically if the user
     has logged in */ 
  const request = axios.get(PAGES_URL);

  return {
    type: FETCH_PAGES,
    payload: request
  };
}

// reducers.js
const initialState = …

在我的反应应用程序中,我使用axios来执行REST api请求.

但它无法使用请求发送Authorization标头.

这是我的代码:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

这里的validToken()方法只是从浏览器存储中返回令牌.

所有请求都有500错误回复说

无法从请求中解析令牌

从后端.

如何使用每个请求发送授权标头？你会推荐其他任何反应模块吗？

我正在尝试实现以下代码,但有些东西不起作用.这是代码:

  var session_url = 'http://api_address/api/session_endpoint';
  var username = 'user';
  var password = 'password';
  var credentials = btoa(username + ':' + password);
  var basicAuth = 'Basic ' + credentials;
  axios.post(session_url, {
    headers: { 'Authorization': + basicAuth }
  }).then(function(response) {
    console.log('Authenticated');
  }).catch(function(error) {
    console.log('Error on Authentication');
  });

它返回401错误.当我使用Postman执行此操作时,可以选择设置Basic Auth; 如果我没有填写这些字段,它也会返回401,但如果我这样做,则请求成功.

我有什么想法我做错了吗？

以下是如何实现此API的API文档的一部分:

此服务使用标头中的基本身份验证信息来建立用户会话.凭据将根据服务器进行验证.使用此Web服务将创建一个会话,其中包含传递的用户凭据并返回JSESSIONID.此JSESSIONID可用于后续请求以进行Web服务调用.*

当我卷曲的东西,它工作正常:

curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  http://example.com/upload

如何让这个与axios一起工作？如果重要,我正在使用反应:

uploadURL (url) {
  return axios.post({
    url: 'http://example.com/upload',
    data: {
      url: url
    },
    headers: {
      'x-device-id': 'stuff',
      'Content-Type': 'multipart/form-data'
    }
  })
  .then((response) => response.data)
}

由于某种原因,这不起作用.

我正在使用axios来获取基本的http请求,比如get和post,它运行良好.现在我需要能够下载excel文件.这可能与axios一起使用.如果是这样,有人有一些示例代码吗？如果不是我还能在反应应用程序中使用什么来做同样的事情？

我正在尝试创建一个postHTTP请求,其中包含一些要设置的表单参数.我正在使用带有节点服务器的axios.我已经有一个构建url的java代码实现,如下所示:

JAVA代码:

HttpPost post = new HttpPost(UriBuilder.fromUri (getProperty("authServerUrl"))
            .path(TOKEN_ACCESS_PATH).build(getProperty("realm")));

List<NameValuePair> formParams = new ArrayList<NameValuePair>();

formParams.add(new NameValuePair("username",getProperty ("username")));
formParams.add(new NameValuePair("password",getProperty ("password")));
formParams.add(new NameValuePair("client_id, "user-client"));

我想在axios做同样的事情.

AXIOS实施:

axios.post(authServerUrl +token_access_path,
        {
                username: 'abcd', //gave the values directly for testing
                password: '1235!',
                client_id: 'user-client'
        }).then(function(response) {
            console.log(response); //no output rendered
        }

在邮政要求上设置这些形式参数的方法是否正确？

我有一个动作POST向服务器发出请求以更新用户的密码,但我无法处理链接的catch块中的错误.

return axios({
  method: 'post',
  data: {
    password: currentPassword,
    new_password: newPassword
  },
  url: `path/to/endpoint`
})
.then(response => {
  dispatch(PasswordUpdateSuccess(response))
})
.catch(error => {
  console.log('ERROR', error)
  switch (error.type) {
    case 'password_invalid':
      dispatch(PasswordUpdateFailure('Incorrect current password'))
      break
    case 'invalid_attributes':
      dispatch(PasswordUpdateFailure('Fields must not be blank'))
      break
  }
})

当我记录错误时,这就是我所看到的:

当我检查网络选项卡时,我可以看到响应正文,但由于某种原因我无法访问这些值!

我在某个地方不知不觉地犯了错误吗？因为我正在处理来自不同请求的其他错误,但似乎无法正常工作.

我正在使用axios作为反应应用程序,我想记录我在应用程序中的任何位置进行的所有axios调用.我已经通过create函数使用了一个axios的全局实例,并且我能够记录一个通用的console.log.但是,我想要更多信息,如函数被调用,参数等.

我在ReactJS中编程时正在使用Axios,我假装向我的服务器发送DELETE请求.

为此,我需要标题:

headers: {
  'Authorization': ...
}

而身体是由

var payload = {
    "username": ..
}

我一直在网络中搜索,只发现DELETE方法需要一个"param"并且不接受"数据".

我一直试图像这样发送它:

axios.delete(URL, payload, header);

甚至

axios.delete(URL, {params: payload}, header);

但似乎没有任何作用......

有人可以告诉我它是否可能(我认为是)发送带有标题和正文的DELETE请求以及如何执行此操作？

先感谢您!