Javascript Axios vue.js CORS错误，代理未定义响应

我正在尝试使用端口8080上的客户端vueJS从端口3000上的REST API获取数据。这将导致CORSE错误。

POST

工作正常。为了解决这个问题，我尝试创建一个代理，如下所述

我想将我的流量重定向到3000端口

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

我正在将response.data打印到控制台，但我的returnVal始终未定义。我错过了什么？ 这是我在浏览器中的网络日志

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

---

这个问题有很多问题

首先，让我们关注这一点：

函数getTeams（）{ var-returnVal； axios({ 方法：“get”， url:REST_API+“/团队”， responseType:'json' }) .然后（功能（响应）{ console.log（response.data）；//是我想要返回的 returnVal=response.data； }); console.log（returnVal）；//未定义 返回returnVal.data； } 第一个日志行记录的值正确，但第二个日志行未定义

这是意料之中的。它与CORS或代理无关

问题是axios请求是异步的，因此直到将来某个时候才会调用

then

回调。到那时，函数将返回。您应该会发现，出于同样的原因，日志行的记录顺序是“错误的”

不能从函数同步返回异步检索的值。使用

async

/

await

可能会让它看起来像是可以做到的，但即使这样也只是一种捏造，隐藏了潜在的承诺

您有两个选择：

从

getTeams

返回承诺。这就解决了等待调用代码的问题

如果您在组件中，则可以在

回调中设置
数据
属性。这不是返回值

然后是你问题的其他部分

看起来您已经成功地配置了代理。很难确定，但从你在问题中包含的一切来看，似乎都是正确的。如果代理不工作，您将无法在控制台日志中获取正确的数据

但是，在您的响应中有很多CORS标题。如果您使用的是代理，则不需要CORS头。代理是CORS的替代品，您不能同时使用两者

---

至于您的CORS请求在使用代理之前失败的原因，从问题中提供的信息很难说。

您能否确认

然后
回调中记录了正确的值？是的，我在控制台上打印了它。但似乎不允许我返回JSON。是的，选项1对我有效！你刚刚救了我们的项目，非常感谢。我现在返回async。代理也可以正常工作。
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