时间戳

首页 > 解决方案 > 有没有办法在仅使用 Vue.js 的网站中“获取”类似 csv 的信息？

csv - 有没有办法在仅使用 Vue.js 的网站中“获取”类似 csv 的信息？

问题描述

我正在尝试“获取”本网站中的信息：http ://nestlegremio.ddns.net: 8003/local/people-counter/.api?export-csv&date=20181126&res=30m 仅使用 vue.js http

this.$http.get('http://nestlegremio.ddns.net:8003/local/people-counter/.api?export-csv&date=20181126&res=30m').then(response => {
    if (response.body.length === 0) {
      console.log('error')
    } else {
      console.log(response.body)
    }
  })

但我收到控制台错误：

Access to XMLHttpRequest at 'http://nestlegremio.ddns.net:8003/local/people-counter/.api?export-csv&date=20181126&res=30m' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

还有另一种方法可以做到这一点吗？

标签： csvvue.js

解决方案

您在这里面临的错误来自您尝试从中获取文件的服务器不允许CORS（跨域资源共享）。

简单地说，您的站点（例如在http://localhost:3003/上运行）正在尝试访问http://nestlegremio.ddns.net:8003/。

  • 当 Web 浏览器尝试访问不在同一域 ( http://localhost:3003/ ) 上的资源时，它会使用OPTIONS对 Web 服务器进行第一次查询，以从服务器获取 CORS 信息。
  • 如果服务器没有说为此域启用了 CORS，那么浏览器将不会运行请求并抛出您看到的错误消息。

这里的解决方案是：

  • 如果您可以访问这个给定的服务器，如果您只想依赖客户端代码，则允许 CORS 在其上。

  • 如果您无权访问服务器，则必须构建一些服务器代码来从给定的 url 检索数据，然后将其返回给您的 Vue.js 代码。从服务器端代码完成的 Http 调用不受 CORS 的影响。

这是有关此主题的更详细说明。

推荐阅读