seo Question posted in
Some basic information to get you started with this can be found here.

How to solve problem with Axios post request – SEO

There is such a vue method:

methods: {

sendTrackerClientData () {

    return axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=00227220201402050613" , {
      tracking_data: 'some data'
     })
    .then(response => {
      console.log('post method is working!');
    })
    .catch(function (error) {
      console.log(error);
    });
},

}

Which is hung on a button click event

введите сюда описание изображения

After trying to send data, we can see the warnings and error described above in the firebug.
Trying to add headers by type:

return axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id="+ this.$store.state.tracker.trackingKeyId , {
   headers: {
       'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        'X-Powered-By': 'bacon'
      },
      tracking_data: this.$store.state.tracker.trackingClientData
     })
    .then(response => {
      console.log('post method is working!');
    })
    .catch(function (error) {
      console.log(error);
    });

It didn’t lead to anything.
Question:
How can I solve this problem?

Tags:

2

Answers


  1. 0

    The issue means server restricts cross-origin requests. Those headers you’ve tried to add should be added on the server side. There is no way you can make it work without modifying your server code/settings.

    Login or Signup to reply.
  2. 0

    OK, let’s break this down:

    axios.post("... lots of stuff ..."+ this.$store.state.tracker.trackingKeyId , {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
    'X-Powered-By': 'bacon'
  },
  tracking_data: this.$store.state.tracker.trackingClientData
})

    The first argument you’re passing to post is the URL. I’m going to assume that’s the correct URL.

    The second argument you’re passing is this object:

    {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
    'X-Powered-By': 'bacon'
  },
  tracking_data: this.$store.state.tracker.trackingClientData
}

    This is wrong in multiple ways.

    Firstly, you seem to be trying to add response headers as request headers. Neither Access-Control-Allow-Origin nor X-Powered-By should be there. They should be on the server.

    But they aren’t actually being set anyway because you’ve put the headers config in the wrong place. The arguments for post should be url, data, config. The headers need to go in the config, not the data.

    axios will set the content-type header automatically. In the case of your request it’ll set it to application/json. However, that will trigger a CORS preflight OPTIONS request as it isn’t one of the 3 safe-listed content-types.

    I don’t know what content-type the API you’re using expects but if you need to avoid the preflight request then you’ll need to set it to one of application/x-www-form-urlencoded, multipart/form-data or text/plain. e.g.:

    axios.post("... lots of stuff ..."+ this.$store.state.tracker.trackingKeyId , {
  tracking_data: this.$store.state.tracker.trackingClientData
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

    However, the data is still being encoded as JSON here (so the content-type header and the request body don’t actually match). I believe jQuery defaults to encoding the data as a URL encoded query string. The official axios documentation for doing that is here:

    https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

    However, all of this very much depends on exactly what format the server is expecting.

    As you only have a single parameter it might be possible to do something like this:

    axios.post(
  "... lots of stuff ..."+ this.$store.state.tracker.trackingKeyId,
  'tracking_data=' + encodeURIComponent(this.$store.state.tracker.trackingClientData),
  {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
)

    To debug this further you should carefully inspect the headers being sent each way in the Network tab of your browser’s developer tools. Make sure they are exactly what you’re expecting. There shouldn’t be any mysteries here, you can see exactly what headers are being used.

    Further, if you aren’t clear on how CORS works and what can trigger a preflight OPTIONS request then you should do some background reading on that.

    Finally, you need to find out exactly what format your server is expecting for the data. We can speculate all day about what the correct code might be but if we know what we’re aiming for then there’s no need to guess.

    I would add that the jQuery example you posted has tracking_data spelt incorrectly as traking_data. That won’t be related to the CORS error but it makes me wonder whether it really ‘works’.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search