Axios vue.js CORS Error with proxy undefined response

Question

I am trying to GET data with my client vueJS on port 8080 from the REST API on port 3000. This is resulting in a CORSE Error. A POST is working fine. To fix this I tried to create a proxy as described here https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 .

//vue.config.js
module.exports={
  devServer:{
    proxy: {
      '/teams': {
        target: 'http://192.168.70.54:3000',
        ws: true,
        changeOrigin: true,
        secure: false
      }}}}

I want to redirect my traffic to the 3000 port.

//rest.js
function getTeams() {
  var returnVal;
  axios({
    method: 'get',
    url: REST_API + '/teams',
    responseType: 'json'
    })
    .then(function (response) {
      console.log(response.data);  //Is what I want to return
      returnVal = response.data; 
    });
  console.log(returnVal);          //Is undefined
  return returnVal.data;
}

I am printing response.data to the console but my returnVal is always undefined. What am I missing? This is my network log in the browser.

General:
Request URL: http://localhost:8080/teams
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8080

Response Headers:
Referrer Policy: no-referrer-when-downgrade
access-control-allow-header: Origin, X-Request-With, Content-Type, Accept
access-control-allow-methods: GET, POST
access-control-allow-origin: *
connection: close
content-length: 1070
content-type: application/json
Date: Tue, 17 Dec 2019 18:57:14 GMT

Request Headers:
X-Powered-By: Express
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:8080
Referer: http://localhost:8080/setup
User-Agent: Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/74.0.3729.157 Chrome/74.0.3729.157 Safari/537.36

Answer 1

There's a lot going on in this question.

Firstly, let's focus on this bit:

function getTeams() {
  var returnVal;
  axios({
    method: 'get',
    url: REST_API + '/teams',
    responseType: 'json'
    })
    .then(function (response) {
      console.log(response.data);  //Is what I want to return
      returnVal = response.data; 
    });
  console.log(returnVal);          //Is undefined
  return returnVal.data;
}

The first log line is logging the correct value but the second log line is undefined .

This is to be expected. It has nothing to do with CORS or proxying.

The problem is that the axios request is asynchronous, so the then callback won't be called until some point in the future. By that point the function will have returned. You should find that the log lines are being logged in the 'wrong' order for the same reason.

You can't return an asynchronously retrieved value synchronously from a function. Using async / await may make it look like you can but even that is a fudge, hiding the underlying promises.

You have two options:

1. Return a promise from getTeams . That kicks the problem of waiting up to the calling code.
2. If you are inside a component you can set a data property inside the then callback. This is instead of returning a value.

Then we have the other parts of your question.

It would seem that you have successfully managed to configure a proxy. Difficult to be sure but from everything you've included in the question that seems to be working correctly. You wouldn't be getting the correct data in your console logging if the proxy wasn't working.

However, there are a lot of CORS headers in your response. If you're using a proxy then you don't need the CORS headers. A proxy is an alternative to CORS, you don't use both.

As for why your CORS request was failing prior to using a proxy, it's difficult to say from the information provided in the question.