Have problem with multi request with axios in vuejs


#1

Hi I have problem
I have layout and It has 3 component and I send axios request in each of them ,
like this:

import axios from 'axios'
export default {
methods: {
    getProfileData() {
        axios({
            'method': 'get',
            'url': '/user/get',
            'data': {},
        }).then(res => {
            this.profileData = res.data.item
           
        })
    },
}

and in another one I use another request when i load page
the OPTION request send and in one of them respone header send incorectly
and header change .
I think Its for same request and I search alot and I don’t get enough response for that ,
thank for your attention
If need more info tell it


#2

You’ll need to be a little more specific.

Seeing the OPTIONS request is normal within browsers, but we cant know what you are expecting or think should be happening in regards to the headers on such requests.


#3

thank you for your answer , but its not about header, I have 2 component and load at the same time and in each one I have axios request , just one of them excute another one just send It’s Options I send their header

    OPTION : /meal/get        200 success
    GET: /meal/get            200 success
    OPTION: /message/get      200 success
    dont send GET :/message/get 

their header:

Option Header One:

> Access-Control-Allow-Credentials    true
> Access-Control-Allow-Headers    Origin, Accept, Content-Type, …, X-GR-   Token, Accept-Language
> Access-Control-Allow-Methods    GET,POST,OPTIONS
> Access-Control-Allow-Origin *
> Access-Control-Expose-Headers   X-Access-Token, X-Refresh-Toke…nation-Total-Count, X-Payload
> Connection  Keep-Alive 
> Content-Length  0
> Content-Type    text/html; charset=UTF-8
> Date    Mon, 11 Mar 2019 16:00:22 GMT
> Keep-Alive  timeout=5, max=100
> Server  Apache/2.4.27 (Win64) PHP/7.1.9
> Status  200 OK
> X-Powered-By    PHP/7.1.9

option header 2:

> Connection  Keep-Alive
> Content-Length  876
> Content-Type    text/html; charset=UTF-8
> Date    Mon, 11 Mar 2019 16:00:23 GMT
> Keep-Alive  timeout=5, max=100
> Server  Apache/2.4.27 (Win64) PHP/7.1.9
> X-Powered-By    PHP/7.1.9

I dont know why header send like this, I guess about conccurent request but I dont know how to solve this problem


#4

Based on what you’ve provided, the 2nd request must not have the same headers as the 1st request. Axios provides interceptors so you can send the same headers with all your requests: https://github.com/axios/axios#interceptors


#5

I know what is that , and I use It , like this

axios.interceptors.response.use(
function(response) {
  // throw new axios.Cancel('Operation canceled by the user.');
  if (response.headers['x-payload']) {
      const payload      = JSON.parse(response.headers['x-payload']);
      const notification = payload.notification;
      const message      = payload.message;

      store.commit('notification/setNotificationNum', notification);
      store.commit('notification/setNotificationMessage', message);
  }

  NProgress.done()
  /*if(response.data.message) {
    toast.success(response.data.message);
  }*/

  return response
 }, 
  async function(error) {
  if (error.request.status == 401 && router.history.current.name != 'Auth') {
    if (error.config.url.includes('/oauth/token')) {
      // Refresh token has failed. Logout the user
      store.dispatch('auth/logout')
      throw error
    } else {
      try{
        await store.dispatch('auth/refreshToken')

        // Retry the original request
        return ApiService.customRequest({
            method: error.config.method,
            url: error.config.url,
            data: error.config.data,
            params: error.config.params
        })
      } catch (e) {
          // Refresh has failed - reject the original request
          throw error
      }
    }
  }

  if (error.response) {
    toast.error(error.response.data.message);
  }
  return Promise.reject(error)

}
);

if I send request in seprately it works true , but know I have porblem like this i said above


#6

This could be an issue with the API specifically, and nothing to do with Axios Vue or Javascript. I would debug this outside of javascript and manually send an OPTIONS request. Your option header 2 is clearly missing headers, specifically the access control headers for CORS, which would cause the browser to abort sending the next request.

I dont think there is much you can do, or anything you’re doing wrong on the JS side as far as I can tell and this is most likely a server side issue


#7

thank for your answer I check alot server and topic and question on internet but all of them say about CORS and I check CORS alot , this is my cors I set it :

    $this->response->setHeader("Access-Control-Allow-Origin", "*");
    $this->response->setHeader("Access-Control-Allow-Headers", "X-Requested-With, Origin, Referer, User-Agent, Accept, Content-Type, Accept-Language, X-Access-Token, X-Client-Id, X-Secret-Id, X-GR-Token");
    $this->response->setHeader("Access-Control-Allow-Methods", 'GET,POST,OPTIONS');
    $this->response->setHeader("Access-Control-Expose-Headers", 'X-Access-Token, X-Refresh-Token, X-Access-Token-Expire, X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count, X-Payload');
    $this->response->setHeader("Access-Control-Allow-Credentials", 'true'); 

it’s very strange because my first request get right answer but second have this problem


#8

I found the solution I set header in my php phalcon and It’s response to first request but if I send two request in the same time It’s answer just one of them and second borken

I search alot and understand I put header in .htaccess too this is my code:

#Header set Content-Security-Policy "default-src 'self';"
Header always set Access-Control-Allow-Origin "http://localhost:8080"
Header always set Access-Control-Allow-Headers "Content-Type, Accept-Language, X-Access-Token, X-Client-Id, X-Secret-Id, X-GR-Token"
Header always set Access-Control-Allow-Methods "GET,POST,OPTIONS"
Header always set Access-Control-Expose-Headers "X-Access-Token, X-Refresh-Token,X-Access-Token-Expire, X-Pagination-Current-Page, X-Pagination-Page-Count,X-Pagination-Per-Page, X-Pagination-Total-Count, X-Payload"
Header always set Access-Control-Allow-Credentials "true"