HTMLでの相対パスを修正しました。（HTML5 pushstate用）Javaサーブレットがサービスを提供

ドミニク：

私はそれが何らかの形で魔法のピックアップや用途サーブレット（RootResource.java）が桟橋サーバーを変更しようとしています：

@Singleton
@Path("/")
public class RootResource {
    @Context
    private ServletContext servletContext;

    @GET
    @Path("react-client/{path: .*\\..+$}")
    public Response serveReactClientContent(@Context HttpServletRequest httpServletRequest) {
        // This doesn't work, a resolved relative resource is not relative
        // to the /react-client base. See description of problem.
        final String pathToResource = httpServletRequest.getRequestURI();
        return serveStaticContent(pathToResource);
    }

    @GET
    @Path("react-client/{path: .*$}")
    public Response serveReactClientIndexPage(@Context HttpServletRequest httpServletRequest) {
        return serveStaticContent("/react-client/index.html");
    }

    private Response serveStaticContent(String pathToResource) {
        final String type = this.servletContext.getMimeType(pathToResource);
        final Response.ResponseBuilder response = Response.ok(servletContext.getResourceAsStream(pathToResource)).type(type);
        return response.build();
    }
}

アイデアはにGETリクエストを取ることですreact-client/some/pathとの内容を返しますreact-client/index.html。基本的にクライアント側のルーティングを使用してWebアプリケーションサーバのような突堤の振る舞いをします。

私がいる問題はでその相対パスであるindex.html パスは1つのレベルの深さである場合にのみ、仕事などreact-client/products。

<script src="./webapp.js"></script>

ので、その場合にindex.htmlを上記のJavaScriptファイルが発見されたwebapp.js時に存在するファイルですreact-client/webapp.js。

私は深くリンクなどしてみてくださいとすぐにreact-client/products/97357361サーブレットを見つけようとすると失敗するwebapp.jsにはreact-client/products/webapp.js存在しないし。

どのように私はそれからだかのように、それは常にリソースを要求することができますか/react-client？感謝

モントリM：

あなたは以来index.htmlのような複数のURLによるアクセスを得ることができます

/反応し、クライアント/製品
/反応し、クライアント/製品/ 97357361
/反応し、クライアント/一部
/反応し、クライアント/いくつかの/パス

追加することが賢明であるかもしれない<base>あなたのHTMLページのヘッダーにタグを。

<head>
    ...
    <base href="https://www.yourwebsite.com/react-content/" />
    <script src="./script.js"></script>
    ...
</head>

これは、と比較してページで見つかった相対パスを解決するために、ブラウザを教えてくれます https://www.yourwebsite.com/react-content/

したがって、上記の例によると、<script src="./script.js"></script>としてサーバーに要求されるだろう"https://www.yourwebsite.com/react-content/script.js"に関係なく、このページにアクセスするために使用されている現在のURLの。

その後、あなたは桟橋上でこれらの設定を戻すと、それをシンプルに保つことができます。

HTMLでの相対パスを修正しました。（HTML5 pushstate用）Javaサーブレットがサービスを提供

おすすめ