What causes a Next.js 15 Fetch URL to fluctuate in production when deployed on Fly.io?

When attempting to fetch a post on a live next.js 15 site hosted on Fly.io, the URL specified in the fetch request is being altered and leading to a 404 not found error;

The URL shown in the network tab of Chrome's dev tools is:

https://www.rleaguez.com/organizationz/www.rleaguez.com/api/v2/organization

However, when I console log the URL being used, it shows as:

https:www.rleaguez.com/api/v2/organization

Here is the fetch code I am currently using:

  const postUrl = 'https:www.rleaguez.com/api/v2/organization';
  console.log("🚀 ~ CreateOrg ~ postUrl:", postUrl)
  const orgResponse = await fetch(
    postUrl,
    {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify(data),
    },
  );

If I hardcode the URL within the fetch request as shown below, the post is successful:

  const orgResponse = await fetch(
    // hardcoded url below is successful
    ‘https://www.rleaguez.com/api/v2/organization’,
    {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify(data),
    },
  );

I'm puzzled as to why the URL changes in the production environment instead of remaining consistent with what I've placed in the code. Any insights would be greatly appreciated!

Answer â„–1

I want to express my gratitude for Jabaa's help in pointing out that the URL was invalid because it was missing the // after the https: in the link;

Once I updated the URL to

const postUrl = 'https://www.rleaguez.com/api/v2/organization';

from

const postUrl = 'https:www.rleaguez.com/api/v2/organization';

the issue was resolved; I assume that since the original URL was incorrect, the post URL was modified to use the current page as a prefix for posting.

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

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

The Correct Way to Implement Google ReCaptcha

I've developed a PHP contact form that performs validation using AJAX/JSON on the server side. The errors are then passed to Javascript for display and adjustments to the HTML/CSS. My challenge now is to integrate Google ReCaptcha with AJAX validatio ...

Drop-down functionality in Bootstrap Form becomes unresponsive after screen width is decreased

I recently encountered a strange issue with my simple Bootstrap form. When I resize my browser width to mobile size or view it on a mobile device, the form stops functioning properly. Unfortunately, I am unable to provide any specific code examples at this ...

The function $http.get in AngularJS is providing an undefined response

In the process of developing a small Angular application, I started with this seed project: https://github.com/angular/angular-seed. The only modifications I made were to the following files: /app/view1/view1.js 'use strict'; angular.mod ...

Is there a way to verify the functionality of DigitalOcean features using doctl before transitioning to a live environment?

As a newcomer to using DigitalOcean Functions, I have set up some JavaScript namespaces using the doctl serverless command. My main query is regarding testing DigitalOcean functions locally before deploying them to production. Is there a way to do this wit ...

Transferring information between AngularJS and Express/Node without using AJAX

My application is built using AngularJS on a node/express backend, with user authentication handled by passport. After a user signs in or signs up, the communication between my Angular controllers and express is done through $http ajax/xhr calls. The form ...

Is there a way in Vue to efficiently route multiple instances belonging to the same component while ensuring they maintain their individual states?

It's a bit difficult to capture the exact issue in the title. Here is the scenario: // In the main layout page <keep-alive> <router-view /> </keep-alive> // And I have a route { path: "something/:id", name: "someth ...

Steps to verify if a property of an object in an array aligns with any of the values in a separate object array

The header information might seem complicated at first, but let me simplify it for you. Consider the following object: const users= [ { id:"1", name:"John", email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data ...

Refresh a specific DIV element without having to refresh the entire page

I have a Div Tag that includes Small.php to populate it with information. My goal is to refresh the content every 15 seconds without reloading the entire webpage. I've attempted using JavaScript/jQuery without success. <script type="text/javascrip ...

Using the React key attribute for components without distinct identifiers

When dealing with a situation where users need to provide a list of timeframes, it can be tricky to generate a unique key for each component in React. Simply using the index of the array is not sufficient, as items can be removed from the middle of the lis ...

Display a modal when closing a tab using Vue.js

I'm attempting to display a confirmation popup when the page reloads or the user navigates outside of my website in Vue.js. I have already implemented the beforeRouteLeave function in my component, but it only works when navigating to another page wit ...

Struggling to calculate the total of a property within an array of objects

I'm currently trying to calculate the sum of a specific property within an array object. Although I successfully accomplished this in one component, I am encountering difficulties replicating it in another. The error message being displayed is: this. ...

Executing functions and setting element values upon loading in Javascript

I am currently working on updating a small Javascript function that assigns an active class to the parent <div> of a group of radio buttons when the page loads and also when there's a change event. The existing function looks like this: functi ...

Updates to class variable values in jQuery are failing to take effect

Attempting to create my first JavaScript class has presented some challenges, specifically when it comes to updating a class variable. Despite hours of testing different approaches, I still can't seem to get it right! function ClassName(productId) { ...

Searching for two fields of an object in Angular using ng-repeat

Let's imagine we have this array $scope.myArr = [{ name: 'Marc Rasmussen', phone: 239470192, title: 'It Dude', description: 'Hello my name is Marc i am testing the fact that i can search for two fields in an o ...

What is the rationale behind sending only one form?

Is there a way to send two forms with just one click? The first form uploads an image to the server, while the second form sends information to a database. However, only the "myform" seems to be sent. Any suggestions? <form action="uploadpic.php" met ...

Generate Address from Latitude and Longitude

For my project, I am trying to convert latitude and longitude coordinates into an address. While the Google Maps API is a potential solution, it requires an XML Response which complicates the process. I came across this helpful thread on Stack Overflow d ...

Just easy highlighting using tags in Javascript

I have come across a code snippet that seems to be functioning well: <html> <head> <title>Testing JS Highlighting</title> <script type="text/javascript"> function highlight() { var t = ...

Enzyme locates and chooses the initial occurrence of an element

I am attempting to simulate a click on the initial box out of three. My React script appears as follows: const Boxes = (props) => { return ( <div className="container"> <div onClick={props.showMessage} className="box">One& ...

Modifying the order of Vuetify CSS in webpack build process

While developing a web app using Vue (3.1.3) and Vuetify (1.3.8), everything appeared to be working fine initially. However, when I proceeded with the production build, I noticed that Vue was somehow changing the order of CSS. The issue specifically revol ...