An unconventional web address was created when utilizing window.location.hostname

Question

An unconventional web address was created when utilizing window.location.hostname

I've encountered an issue while trying to concatenate a URL, resulting in unexpected output. Below you'll find the code I tested along with its results.

As I am currently testing on a local server, the desired request URL is http://127.0.0.1:8000/api/posts. However, I will eventually deploy this system to a remote server, so I can't use the request URL as it stands. Based on the code below, my goal is to fetch the current hostname and append it with the route URL, but the result is not what I expected. What could be causing this unusual behavior?

Component

created() {
        var test = window.location.hostname + '/api/posts';
        this.axios.get(test).then(response => {
        this.posts = response.data.data;
    });

https://i.stack.imgur.com/23Wu3.png

Route Api (api.php)

Route::get('/posts', 'PostController@index');

javascript laravel vue.js

Answer 1

Answer №1

To avoid the need to set up a base URL, you can simply use an absolute URL in your axios requests:

this.$axios.get('/apiposts')

The key element here is the leading /.

Answer 2

To avoid the need to set up a base URL, you can simply use an absolute URL in your axios requests:

this.$axios.get('/apiposts')

The key element here is the leading /.

Answer 3

Answer №2

You may not necessarily have to specify a baseURL. Have you attempted defining a baseURL? Here's an example:

axios.get(`${process.env.HOST}:${PORT}/api/categories`)

To implement this code, add it to your /src/main.js

const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
  Vue.axios.defaults.baseURL = baseURL;
}

For more information, refer to the solution provided in Set baseURL from .env in VueAxios

It seems that the baseURL in your application is configured as http://127.0.0.1:8000 by default, and you are appending the host to this URL in the line

var test = window.location.hostname + '/api/posts';

. You could try omitting this part.

Answer 4

You may not necessarily have to specify a baseURL. Have you attempted defining a baseURL? Here's an example:

axios.get(`${process.env.HOST}:${PORT}/api/categories`)

To implement this code, add it to your /src/main.js

const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
  Vue.axios.defaults.baseURL = baseURL;
}

For more information, refer to the solution provided in Set baseURL from .env in VueAxios

It seems that the baseURL in your application is configured as http://127.0.0.1:8000 by default, and you are appending the host to this URL in the line

var test = window.location.hostname + '/api/posts';

. You could try omitting this part.

An unconventional web address was created when utilizing window.location.hostname

Answer №1

Answer №2

Similar questions

Laravel Echo fails to capture events when using socket.io

Having issues with referencing external JavaScript and CSS files in Angular 6

Context failing to refresh value upon route changes

Vue.js 3 - "The 'createStore' export could not be located in the 'vuex' package"

"Implementing a dynamic image thumbnail list with adjustable opacity effects and the ability to add or remove classes

Gathering the presently unfinished observables within a superior-level rxjs observable

The Alertify dialog vanished without being able to confirm

Guide on how to set up routing for a Rails 5 API single page application with numerous static entry points

Querying data via AJAX from a specific Laravel route to retrieve a JSON encoded array filled with dates to populate ChartJS labels

Does the process of reading a `stream` consume resources in Node.js?

Creating a synchronous loop in Node.js with Javascript

Do not directly change a prop's value as it will be replaced when the parent component re-renders. Use v-form instead

What is the best method for waiting on a JavaScript function to provide a response utilizing the Chrome.storage API?

Exploring jQuery's AJAX capabilities in handling cross-domain requests and implementing Basic Authentication

Using Laravel 5.2 with the Whoops error handling tool

React throws an error message when the update depth surpasses its maximum limit

Vuetify: Utilizing Time Range Inputs for Start and End Time

Issue with saving cookie from Express.js backend to Nuxt.js frontend

Attempting to extract the text within a table row cell by clicking on the cell directly following it

How can you continuously calculate and show the total quantity of items in a list?