javascript - Axios vue.js CORS 错误,代理未定义响应
问题描述
我正在尝试GET
从端口 3000 上的 REST API 在端口 8080 上使用我的客户端 vueJS 数据。这会导致 CORSE 错误。APOST
工作正常。为了解决这个问题,我尝试创建一个如此处所述的代理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
}}}}
我想将我的流量重定向到 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
解决方案
这个问题有很多事情要做。
首先,让我们关注这一点:
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;
}
第一个日志行正在记录正确的值,但第二个日志行是undefined
.
这是可以预料的。它与 CORS 或代理无关。
问题是 axios 请求是异步的,所以then
直到将来某个时候才会调用回调。到那时,函数将返回。您应该会发现日志行出于同样的原因以“错误”的顺序记录。
您不能从函数同步返回异步检索的值。使用async
/await
可能会让它看起来像你可以,但即使这样也是一种软糖,隐藏了潜在的承诺。
你有两个选择:
- 从 中返回一个承诺
getTeams
。这就解决了等待调用代码的问题。 - 如果您在组件内部,则可以在回调中设置
data
属性。then
这不是返回值。
然后我们有你问题的其他部分。
您似乎已成功配置代理。很难确定,但从您在问题中包含的所有内容来看,似乎工作正常。如果代理不起作用,您将无法在控制台日志记录中获得正确的数据。
但是,您的响应中有很多 CORS 标头。如果您使用的是代理,则不需要 CORS 标头。代理是 CORS 的替代品,您不能同时使用两者。
至于为什么您的 CORS 请求在使用代理之前失败,从问题中提供的信息中很难说。
推荐阅读
- c# - 如何以编程方式从 NTFS $Secure 文件中检索数据?
- operating-system - 有什么方法可以为同一程序的运行实例获取确定性标识符?
- logging - 显示多个 tLogRow 组件的输出
- laravel - 用 Redis GEOADD 存储 JSON 成员是不好的做法吗?
- json - 如何将嵌套映射包装到列表中并将其递归写入 json 元素的最后一个?
- node.js - 使用打字稿时变得未定义
- opengl - 在 DSA 代码的更新循环中是否使用 glBindVertexArray
- android - 在android中写入现有JSON文件时遇到问题
- arrays - 将 setState 反应为数组,然后 console.log(array) 返回填充的对象数组,但 console.log(array.length) 为 0
- c# - C# & wpf - ListBox-Label-ComboBox 之间的 (OneWay-Mode) 链绑定的意外行为