如何在 Heroku 部署后将 Vue.js 应用程序连接到 Laravel REST API

Question

我有一个前端应用程序 (Vue.js)。我有自己的 REST API (Laravel)。我希望我的 Vue.js 应用程序从 REST API 获取我的数据。这两个应用程序都已部署到 Heroku，并且每个应用程序都有自己的域。

在本地，在我的 Vue.js 应用程序中，我只有以下代码片段可以连接到我的 REST API：

mounted() {
    fetch('http://127.0.0.1:8000/api/testdata', {
    method: 'get'
  })
    .then((response) => {
    return response.json()
  })
    // 'jsonData' refers to the json parsed response
    .then((jsonData) => {
      this.testData = jsonData.data
  })

由于这两个应用程序现在都已部署，这显然现在行不通了。我想知道我必须在 fetch() 方法中放入什么，因为这两个应用程序都在网络上。

要使用 Postman 在本地查看我的 API 数据，我只需在 'GET' 搜索中输入此 URL：http://127.0.0.1:8000/api/test_data.

现在，我不确定必须输入什么才能查看已部署的 API 数据。我试过这个：https://pure-mountain-87762.herokuapp.com/api/test_data and this: https://pure-mountain-87762.herokuapp.com/test_data.

如果我知道在 Postman 中放入什么来查看我的数据，那么我应该知道在我的 fetch() 方法中放入什么（理论上），因为 URL 在本地是相同的。

另外，有谁知道完成这一步后是否还有其他需要配置的地方？

谢谢

Answer 1

是的，您添加一个普通域 url 来发出请求。它将是 Your-app-name.herokuapp.com

检查您的后端是否需要 CORS 允许的方法

如何在 Heroku 部署后将 Vue.js 应用程序连接到 Laravel REST API

How to Connect Vue.js App to Laravel REST API After Heroku Deployment

heroku

laravel

heroku-postgres

vue.js