The 404 Page Not Found error is displayed when an Angular JS Encoded URL

I have successfully developed an AngularJS application.

The application functions properly with the URL provided below:

http://localhost/AngularDemo/about

However, when I try to modify the URL as shown below, it redirects me to a 404 error page:

http://localhost/AngularDemo%2Fabout

To troubleshoot this issue, I made some changes in the .htaccess file:

RewriteEngine on
# Exclude rewriting files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Rewrite all other URLs to index.html for html5 state links
RewriteRule ^  index.html#! [L]

Answer №1

Apache typically handles URL encoded slashes, represented as %2F, by generating a 404 error. This behavior is implemented as a security measure.

If you require support for encoded slashes in URLs, you can adjust your server configuration to allow it:

AllowEncodedSlashes On

For more information, you can refer to the documentation at:
https://httpd.apache.org/docs/2.4/mod/core.html#allowencodedslashes

Certain User Agents such as Linked In ...

In most cases, this should not pose an issue. It's uncommon for user agents to encode URLs in this manner. For example, /AngularDemo%2Fabout and /AngularDemo/about could potentially be interpreted differently.

Answer №2

The solution to my issue was found by using the code snippet below. This can be added to your app.js file:

 $locationProvider.hashPrefix('');

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

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

What is the best way to save a scheduled cron reference in a database in order to deactivate it at a later time in a

I have implemented a system using cron to schedule push notifications. The user provides the push notification data and the scheduled time, and I use cron to send the notifications at the specified time. Below is the code snippet showing how I create a cr ...

Tips for retrieving a specific object based on value in an AngularJS Factory

How can I retrieve a specific flight object from the flights array? I'm calling the getFlights() function in one view and then attempting to use getFlight(flightId) in another view to display details about a particular flight. However, when I call ge ...

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Struggling to remove an event listener in Typescript due to a mismatch between the expected type EventListenerOrEventListenerObject and the actual type of FormEvent: private saveHighScore (event: React.FormEvent<HTMLInputElement>) { This is how I t ...

Ways to call a DIV element in a PHP file from a different PHP file

I am facing an issue with referring to a specific <div> element from one .php page to another. The current code is redirecting me to the home page of the first page, instead of displaying the desired content. Can anyone provide guidance on how to ach ...

Enable lightbox functionality prior to all images being fully loaded

I have a large number of images (thumbnails) on my website and I am using the Featherlite lightbox plugin. However, when I click on one of the loaded images while they are still loading, the lightbox does not work as expected. Instead of opening in a modal ...

Issue with unbinding events in Angular directive persists despite efforts to completely unbind

Our directive features a popup that loads a template with a directive to capture all clicks in the document. When a click is detected, it sends an event to close the popup and unbinds the event on the $document. This directive effectively captures docume ...

Issue encountered while using Axios to send an http request to a server

I am facing an issue when making a GET request to the jasonplaceholder server to fetch data. Sometimes, the request returns undefined for a brief period before fetching all the data. How can I prevent this undefined response and halt the code execution u ...

What CSS property prevents a fixed header from overlapping a scrolled element?

After creating a fixed header for my HTML table, I noticed that as I scroll down the page, everything is being overlapped by the fixed header except for one slider (noUiSlider). I am curious to know which CSS property is preventing the header from overlayi ...

React Hooks: Unable to re-enable input after it has been disabled

Attempting to manage the status of my points input whether it's enabled or disabled, I encountered an issue. Upon checking the checkbox, it correctly gets disabled. However, upon unchecking it, the input remains disabled. Initially, I attempted settin ...

What is the key element missing from my code while attempting to integrate Threejs into React?

I recently undertook the task of converting a project from vanilla Three.js to React. For reference, here is the original project: https://codepen.io/Mamboleoo/pen/rNmRqeK And here is the code I have been working on: You can view the code in CodeSandbox ...

What is the best practice for adding a DOM element at a precise location within an ng-repeat loop?

I am currently working on developing a podcast player application using AngularJS. At this point, I have successfully created a list of available podcasts that can be played, utilizing ng-repeat. The code for the list is shown below: <ul ng-controller ...

I am experiencing some difficulty with the GetServerDate using the JSON protocol in JQuery; it's

I am facing an issue while trying to execute a basic ajax call to fetch data from a file on a server. Even though I can access the file via the web browser and have diligently followed tutorials related to this topic, I have hit a dead end. Here is the sn ...

How to achieve multiplication in Javascript without utilizing the * operand

Challenge 1 Criteria: This problem involves working with two positive integers N and M. Outcome: Upon completion, the function should output the result of multiplying N and M. For instance, if you input 5 and 8 into the function, it should calculate and ...

Guide on incorporating jQuery into a jQuery plugin within an Angular 2+ application using Webpack or Angular CLI

I'm running into an issue importing a jQuery plugin into a single Angular component. It works fine in most browsers, but IE 11 is giving me this error: SCRIPT1002: Syntax error main.bundle.js (1376,1) When I investigate the error, it points me to th ...

Ways to identify browser version in Angular 4 to discourage IE usage

Is there a method in Angular 4 (TypeScript) for detecting the browser type? I am currently working with Angular 4 and would like to explore options for identifying the browser type when my application is loaded. I specifically want to prevent my applicati ...

Unable to trigger onClick event in React class-based component

I came across the following code for a class-based component: class PostLike extends Component { constructor(props) { super(props); this.state = { likes: null, like_id: null } this.likeSubmit = t ...

Invoke a different route within Express Router when it needs to display a Not Found error (404)

Hey there, how are you? Below is the code I've been working on: const router = Router(); router.use( `${routePrefix}/v1/associate-auth/`, associateAuthRoutesV1(router) ); router.use( `${routePrefix}/v1/associate/`, JWTVerify, ...

Avoiding errors on the client side due to undefined levels in a specific response JSON can be achieved using the RESTful API

Below is a straightforward JSON response example: { "blog": { "title": "Blog", "paragraphs": [{ "title": "paragraph1", "content": "content1" }, { "title": "paragraph2", "content": "content2" }, { ...

Stopping a velocity.js animation once it has completed: is it possible?

For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains vi ...