VueJS encountered an insecure XMLHttpRequest endpoint during the request

I am currently working on a project that consists of a VueJs app with a Laravel backend serving as the API.

While testing the app locally, everything works smoothly with the Https protocol. However, upon deploying it to the production server, I encountered the error message 

Requested an insecure XMLHttpRequest endpoint
.

My server is hosted on Digital Ocean, managed by RunCloud, and SSL has been successfully implemented using LetsEncrypt.

You can access the live application here:

It is important to note that there is currently no authorization implemented for API requests.

I would greatly appreciate any advice or guidance on how to resolve this issue. Thank you in advance!

javascriptlaravelvue.jsdigital-oceanlets-encrypt

Answer №1

The reason behind the issue in my case was a trailing slash / at the end of the request URL.

When making a simple axios call like 

axios.post('https://getShafiq.com/hello/')
, it was functioning correctly on my local environment.

However, when the same call was made on the production server behind CloudFlare, it resulted in an error stating insecure XMLHttpRequest.

Upon inspecting the 'Network' tab in my browser's developer tools, I observed that the URL was returning a 301 - Moved Permanently followed by the error related to the insecure endpoint.

By removing the unnecessary trailing slash after /hello, the issue was resolved and the call started working as expected.

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

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...

javascriptangularjshtmlaccessibilityvoiceover

The process of AJAX polling a JSON-returning URL using jQuery's $.ajax() method does not appear to provide up-to-date responses

I am currently working on a project that involves polling a specific URL for a JSON response using AJAX. The initial AJAX request alerts the server of my need for JSON content, prompting it to start building and caching the response. Subsequent AJAX reques ...

javascriptjqueryajaxjsonpolling

Exclude certain C++ components

When using emscripten, I've noticed that even small C++ files can result in large JavaScript files. For example: #include <memory> int main(int argc, char** argv) { std::shared_ptr<int> sp(new int); } Compiling this with a recent emsdk ...

javascriptc++emscriptenlibc++

All You Need to Know About Jquery's Selector for Nested Elements

Could someone clarify if the Jquery Statement $(selecterA:not(selectorB), elementA) means "return those elements that match selectorA but not selectorB within elementA"? I am confused by a simple case in Fiddle#1, where both output statements using .length ...

javascriptjquery

Arrange objects on a grid

I've got an array filled with objects, each containing 3 images, a name, and some details. I'm attempting to display these objects on Bootstrap cards, but currently each card is showing up on its own line. My goal is to arrange the cards in a gri ...

javascriptreactjstwitter-bootstrapbootstrap-4

"Exploring the magic of Vue.js and Three.js: A guide to seamlessly changing CSS style elements within an

I'm currently in the process of converting my Three.js project to Vue.js Within my Three.js scene, I have a 3D model with HTML points of interest attached to it. It is crucial that these points remain fixed to the model and consistently face the cam ...

javascripthtmlcssvue.jsthree.js

What is the best way to utilize the "useRouter" function to extract parameters from the URL within the getServerSideProps() method in Next.js?

How can I access the URL parameters within the getServerSideProps() method? Below is the snippet of my code. The objective of my code is to extract parameters from the URL, fetch data from the API, and render it on the front end. import { useRouter } from ...

javascriptnode.jsmongodbnext.js

Is there a way to append a URL parameter after a link is clicked using Vue.js?

I am currently working on integrating heading links on my website's sidebar that are linked to the main content using scrollspy. This allows users to easily navigate to different sections of the main content by clicking on the corresponding headings i ...

javascriptvue.jsurlvuejs2

Using node.js to populate embedded document in Mongoose database model

Scenario: const productSchema = new Schema({ name: String, details : [{ name: String, description: String }] }) const listSchema = new Schema({ name: String, products: [{ product_id: { type: Schema.Types.ObjectId, ref: 'Product' } ...

javascriptnode.jsmongodbexpressmongoose

Node-red occasionally crashes and the JSON output may unexpectedly return HTML content

Having some trouble with my node-red crashing several times a day. I suspect that one of the issues may be related to an http request I am making. I'm trying to retrieve JSON data from a webpage, but sometimes I encounter errors in the log indicating ...

javascriptjsonnode-red

Executing simultaneous asynchronous queries with Mongoose results in an error: `SyntaxError: Illegal return statement` due to

My goal is to make multiple asynchronous requests to Mongo using Mongoose in parallel. To achieve this, I created a helper function that handles these queries dynamically without knowing the exact number beforehand. While my current implementation works ...

javascriptmongodbmongoose

Issue encountered while connecting ipcRenderer with ipcMain in an electron application

I recently set up Angular CLI in Electron, and I have a link that triggers a function which communicates between ipcRenderer and ipcMain: Here is the HTML code: <a (click)="check()"> click </a> This is the component code: constructor(privat ...

javascriptnode.jsangularelectronangular-cli

Multer failing to generate file during request process

My current setup involves a router and multer middleware, but I'm facing an issue where the file requested is not being created. As a result, req.file always remains undefined. const multer = require('multer'); let storage = multe ...

javascriptnode.jsexpressmulterbody-parser

The total sum of values within labels that share the same class

I am attempting to sum up all the values of class tmpcpa and store the result in final_cpa, but for some reason final_cpa always ends up being 0. document.getElementById('cpa' + arr[0]).innerHTML = cpa + '(' + '<label id="tmp ...

javascriptjquery

What is the process for defining a distinct column for a specific enum in both mysql and laravel?

In my table, I am creating a time schedule from Sunday to Saturday. I need to generate a unique key for the time slot of 9 am on Sunday, but I also want to reuse the same time slot for another day within the same table. For instance: day |time Su ...

phphtmlmysqllaraveltime

Can someone provide guidance on minifying certain files with laravel-mix?

Is there a way to selectively minimize certain files using laravel-mix? According to the documentation, you can minify files by running npm run prod. I specifically want to minify the file a.js but not b.js. Can this be achieved through the webpack.mix.jso ...

javascriptlaravelnpmlaravel-mix

Using Node JS to pass variables to the client

Currently, I am utilizing Node JS and Express for my server-side needs. In my server-side code, I pass a variable (sources) to my EJS template. Part of this variable is used to populate a list on the webpage. However, when a user clicks on an item in the ...

javascriptajaxnode.js

How to Prevent Scrolling When Modal is in Use on Full Page JS

I am trying to achieve the functionality where when the modal is open, I want to prevent full-page scrolling in JavaScript. The issue arises when I open the modal and try to scroll, it ends up moving the content that's behind the modal, which is actua ...

javascripthtmljquerycssfullpage.js

I constantly encounter a TypeError message that returns as undefined

I'm currently facing an issue while trying to run my Node.js server locally. The error message I keep receiving is: /Users/rogerjorns/Desktop/templateassignment/node_modules/express/lib/router/index.js:458 throw new TypeError('Router.use() ...

javascriptnode.jsexpress

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...

javascriptjquerycssajax