I have a front-end application (Vue.js). I have my own REST API (Laravel). I want my Vue.js app to fetch my data from the REST API. Both apps have been deployed to Heroku and each has their own domains.
Locally, in my Vue.js app, I just had this following code snippet to connect to my 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
})
Since both apps have now been deployed, this obviously doesn't work now. I was wondering what I would have to put inside the fetch() method, now that both apps are on the web.
To view my API data locally with Postman, I can just enter this URL in the 'GET' search: http://127.0.0.1:8000/api/test_data.
Now, I'm not sure what I have to enter to see my deployed API data. I've tried this: https://pure-mountain-87762.herokuapp.com/api/test_data and this: https://pure-mountain-87762.herokuapp.com/test_data.
If I know what to put in Postman to view my data, then I should know what to put in my fetch() method (in theory), since the URL's are the same locally.
Also, does anyone know if there would be anything else to configure after this step has been completed?
Thank you
Yes you add a normal domain url to make requests. It will be Your-app-name.herokuapp.com
Check out if you need CORS allowed methods on your backend