javascript - Problems in js advanced programs

Question

When I saw page 492 of Advanced JavaScript Programming (Third Edition), I had a question

When I use a "fake" URL and refresh it, a 404 error will be returned. Unless I have a real link like this on the web server, the user will inevitably have to refresh the page. Do I really want to make one? Real files correspond to real links. Then what is the use of pushState()? Isn’t it very inconvenient?

Answer 1

pushState is mainly used in SPA applications, to answer the question:

404 appears. This is because there is no # in the URL in PushState mode, the browser will actually initiate a request to the server, and we do not have a resource corresponding to this path on the server.

But there is no need to have a real link on the server (it will tire people to death), you only need to change the server configuration so that the non-existent page (404) redirects to the root route.

Take Tomcat as an example. The configuration is very simple. Just add the following configuration to the web.xml of your project:

    <error-page>
        <error-code>404</error-code>
        <location>/</location>
    </error-page>

In this way, Tomcat will redirect all paths where resources cannot be found to the root path, so that your front-end framework, whether it is angular/vue/react/backbone, can process the requested URL on its own on the front-end.

For other types of servers, such as nginx/apache/IIS, please refer to this document: https://github.com/angular-ui...

Source: https://my.oschina.net/mumu/b...

Answer 2

Pressing refresh will send a request to the server with the URL of the current browser.

For example, if you change the current address to boomshaklaka.com/boom through pushState()
After clicking refresh, the server will return 404 when it receives this address and finds that it does not exist.

Answer 3

First of all, you need to understand the difference between front-end routing and back-end routing.

In the case of only backend routing, all pages you request are returned to you by the backend. At this time, all routing is controlled by the backend.

But sometimes we don’t want to refresh the page, but the url also wants it to change, such as SPA applications. At this time we need a front-end routing, and this pushState plays this role here.

Answer 4

First of all, I am still used to processing routing in the background. I will use background routing as an example:

First of all, the url can be defined arbitrarily. As for which file in the project you want to associate, it’s up to you

<action name="index">
    <result>xxx/index.jsp</result>
</action>
<action name="login">
    <result>xxx/index.jsp</result>
</action>

Different actions can point to the same page, so your website must have at least one page

Second:

In HTML files, the history.pushState() method adds a state to the browser history.

More used to set an anchor point:

 window.location = "#foo";

As for the 404 mentioned in the article, it is still because there is a problem with the routing direction and the resource is not found.