使用 VueJS 在本地主机上获取 API 数据

Question

这就是我的功能，非常简单：

mounted: function(){
      this.$http.get('http://localhost:80/gaming/api/game/1').then((data)=>{
        console.log(data.body);
      });
    }

我的 VueJS 应用程序在端口 8080 上运行，而我的 PHP 在端口 80 上的 XAMPP 上运行。
当我尝试从我的 API 中获取某些内容时，出现以下错误：

Uncaught (in promise) Response {url: "http://localhost:80/gaming/api/game/1", ok: false, status: 0, statusText: "", headers: Headers, …}

我能做什么？

Answer 1

您是否启用了 CORS？使用开发人员工具验证您的调用是否因 CORS 而失败。在 chrome 中安装 CORS 扩展并启用 CORS 会有所帮助。或者，如果您只需要运行本地主机上的应用程序，则在您的 PHP 应用程序中添加选项。

Answer 2

添加 header("Access-Control-Allow-Origin: *"); 以允许 CORS 在 php 上。祝你好运

Fetching API data on localhost with VueJS