Update the fixed reference to `localhost` with a variable that can

I'm looking to make the localhost in my code dynamic instead of hardcoded. Here's the original code:

  export default {
   data: function() 
    {
    return {
        localhost: "http://10.10.10.132/",
           };
    },
    }

Could it be changed to something like this?

   export default {
   data: function() 
    {
    return {
        localhost: window.location.host,
           };
    },
    }

However, when I use

  localhost: window.location.host 

My API request ends up duplicated - Thanks.

Answer №1

Consider utilizing origin over host in this scenario:

   const info = {
      details: function() 
       {
         return {
              siteUrl: window.location.origin,
           };
       },
    }

Answer №2

window.location.host does not contain the protocol:

return {
   localhost: window.location.origin
}

However, based on your issue where the API request is being "duplicated" as you mentioned, you actually do not need to use localhost. If you do not specify the baseUrl (which includes the domain/IP, port, and protocol), the request will automatically be directed to localhost.

Instead of sending a request to localhost/api/something, you can simply send it to /api/something

Answer №3

When you use window.location.host, it only returns the URL without the protocol. To include the protocol in the URL, you can modify it like this:

return {
  localhost: 'http://'+window.location.host,
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript - Toggling checkboxes to either be checked or unchecked with a "check all" option

To create a toggle checkboxes functionality, I am attempting the following: HTML Code: <!-- "Check all" box --> <input type="checkbox" name="check" id="cbx_00_00" onclick="selectbox( this.getAttribute( 'id' ));" /> <!-- the other ...

Unable to authenticate client response using passportjs jwt

Looking to set up login using passport-JWT. able to successfully sign up and log in, with a token generated upon logging in and sent back to the client application. However, after the authentication request reaches the app post-login, it seems like nothin ...

Utilize PHP's file_get_contents to trigger the Google Analytics tracking pixel

For certain goals I have set up in Google Analytics, I am unable to use the JavaScript tracking. Instead, I am interested in achieving the same result by making a call with PHP. One solution that seems straightforward to me is to invoke the URL of the tra ...

Changing a password on Firebase using Angular 5

I am in the process of developing a settings feature for user accounts on an application I've been working on. One key functionality I want to include is the ability for users to update their password directly from the account settings page. To enable ...

Iterate through a listbox and append the content to a textbox using JavaScript

I am currently working on a script to read all the data from a listbox and populate a textbox with those values. I initially attempted to use a for loop for this task, but it seems to be running only once and then stopping. var listbox = $('#<%=l ...

Print the page becomes distorted when the print button is clicked

Whenever I click on the print button, the page style appears to be improperly formatted in the print view. You can check out the demo here: I've tried various codes found on the internet to solve this issue but none of them have worked for me... Her ...

Enhance your dynamic content with jQuery/AJAX through customized CSS styling

Below is the jquery (3.1.1)/ajax request that I am using: $.ajax({ type: "POST", url: "pref.php", dataType: "text", data: { groupe_id: groupe_id, action: "getProducts" }, cache: false, error: function(html){ ...

Failure to properly evaluate the ID string in Express

I'm currently developing an express app and I am facing an issue with adding a friends list on a user's profile page. The user has an array of friends, which is essentially an ID pointing to another user. However, when comparing this ID to the us ...

Whenever I attempt to incorporate the 'var' keyword within a for loop alongside setTimeOut, I encounter unusual output

Here's the code snippet I'm working with: for (var i = 1; i <= 5; i++) { setTimeout(function () { console.log(i); }, 1000); } I'm confused about the output of this code. When I run it, I see the number 6 printed in the c ...

Attempting to implement a smooth fade effect on my image carousel using React-Native

Struggling to animate this image carousel in reactNative and feeling lost. Despite reading the documentation on animations, I can't figure out how to implement it properly. My attempts keep resulting in errors. Any assistance would be greatly apprecia ...

What is the process for saving an image from a Three.js canvas?

Can you provide tips on saving an image from a Three.js canvas? I'm having trouble making Canvas2Image work with Threejs. The issue seems to arise because the canvas object needs a div to be attached to before it is defined. Check out this resource ...

Please ensure to log out when the user exits the tab

I am looking for a way to automatically log out users from my Django site when they close the browser tab or window. Ideally, I want users to be forced to re-enter their username and password if they try to access the site again after closing it without cl ...

Is there a way to navigate to a newly created document?

Is there a way to automatically redirect a user to the show action of a document or post they have just created using express.js? Take a look at the following code snippet, which outlines how I am creating the document: app.post('/document/create&ap ...

The closing tag for the "body" element was excluded even though OMITTAG NO was specified

While attempting to validate my contact support page, I encountered the following errors: Omission of end tag for "body", even though OMITTAG NO was specified ✉ You may have forgotten to close an element or intended to self-close an element by ending ...

Tips for sending additional parameters to an MVC controller without including them in the URL when using the JavaScript window.open method

<a href="#" onclick="openAnchor('<%# DataBinder.Eval(Container.DataItem,"Url") %>', '<%# DataBinder.Eval(Container.DataItem,"infoToSend") %>')"> </a> openAnchor= function (Url, infoToSend) { window.open(Url, ...

Node.js is not accurately setting the content length. How can I resolve this issue?

I could use some assistance. Even though I have set the content-length on the response object, it doesn't seem to be working. Have I done something incorrectly? res.set({ 'Content-Type': res._data.ContentType, 'Content-Length' ...

Choosing the selected option in AngularJS

I am facing a frustrating issue with understanding how AngularJS manages select option values and selections. I have a basic item that I pass to a modal window, which includes a template_id. Additionally, I have a list of templates with names and ids, and ...

Managing data from two tables in Node.js with ejs

I have a question regarding my node.js project that I need help with. As a beginner in this field, I believe the answer may be simpler than anticipated. In my code file named index.js, I found the following snippet after referring to some online documenta ...

using any class as a function parameter in TypeScript

Looking for advice: I am new to TypeScript and have classes defined like the ones below: export declare class SampleOne extends Setting { getValue(): Promise<boolean>; setValue(value: boolean): Promise<void>; } And export declare class ...

What are the top Navigation options in SharePoint 2010?

I have customized the default top navigation in SharePoint 2010 using CSS styles. However, I also want to enhance it by adding icons (.png images) for each navigation menu item. For example, I would like to add an icon next to "Home", another one next to " ...