最初のリリース: 公開アカウント「Zhao Xiake」

序文

私は長年バックエンド開発に携わってきました。10,000 とは言わないまでも 1,000 以上のインターフェイスをフロントエンドに提供してきました。100 人ではないにしても 50 人のフロントエンド開発者と協力してきました。新卒から社会人まで幅広く働いており、10年以上の経験を持つベテランプログラマーとして、長江南部のかわいい女の子から東北部の屈強な男性まで、ほぼあらゆる種類の人々と出会ってきました。フロントエンドとの接続プロセスで問題が発生しました。つまり、バックエンドインターフェイスが提供されました。セルフテストも成功しましたが、フロントエンドはインターフェイスがブロックされていると言いました。確認に行ったところ、 , ほとんどの場合、ブロックされているのはインターフェイスではないことがわかりました。多くの場合、フロントエンドが使用する姿勢が間違っていました。たとえば、インターフェイスに明確に記述されたパラメータはパス上に配置されていましたが、フロントエンドがそれらをインターネットに渡し、インターフェイスがULR明確にqueryString記述されている使用されるのはapplication/x-www-form-urlencoded形式ですが、フロントエンドはapplication/json形式を渡します。そこで、この記事では、一般的に使用されるフロントエンドとバックエンドのパラメータデータ形式をまとめます。フロントエンドおよびバックエンドの開発者が HTTP インターフェイスプロトコルのパラメータ受け渡し形式をよりよく理解できるようにします。

1. HTTP URL 経由でパラメータを渡す

このメソッドは、最も単純で最も一般的に使用されるパラメータの受け渡しメソッドです。通常、フロントエンドがバックエンドからデータを取得するために使用されます。URL を介したパラメータの受け渡しには 2 つのタイプがあります。1 つはパラメータをパス上に配置する方法で、もう 1 つはパラメータをパス上に配置する方法です。もう 1 つは、パラメータをパス上に置く方法ですURL。パラメータはQueryString上、つまりURL後ろ?に配置されます。

HTTPメッセージフォーマット

GET /user/1?userName=admin&arrays=a,b,c,d&ids=1&ids=2&ids=3&ids=4

予防：

パス/user/1上では、パラメータがパス1を介して渡されますが、一部のフロントエンドでは、このスタイルでパラメータを渡すと間違いが発生します。URLRestFul
userName=adminこれは単純なQueryStringパラメータ転送であり、最も一般的であり、通常は間違えることはありません。
arrays=a,b,c,dQueryStringこれは、実際には分離を使用する配列を渡すことによって行われます,。
ids=1&ids=2&ids=3&ids=4これは配列パラメータを渡す方法でもありますが、一般に使用頻度は低く、エラーが発生しやすいです。

バックエンドインターフェースコード

フレームワークを使用してSpringMVCインターフェイスを作成し、2 つのアノテーションを介して上記のパラメーターを受け取ることができます@PathVariable。@RequestParam主な方法は 3 つあります。

1 つ目は、メソッドでパラメーターを 1 つずつ受け取ることです。
2 つ目は、Map<String,Object>受信を使用してパラメータを渡すことです。
3 番目の方法は、UserDTOオブジェクトをカプセル化して受信する方法です。


    @GetMapping("/user/{id}")
    public UserDTO request(@PathVariable Long id, String userName, String[] arrays,@RequestParam List<Long> ids) {
    
    
        return UserDTO.builder().id(id).build();
    }

    @GetMapping("/user2/{id}")
    public Map<String,Object> user2(@PathVariable Long id,@RequestParam Map<String,Object> map)    {
    
    
        return map;
    }

    @GetMapping("/user3/{id}")
    public UserDTO user3(@PathVariable Long id, UserDTO user) {
    
    
        return user;
    }
    
    @Data
    public class UserDTO {
    
    
        private Long id;
        private String userName;
        private String[] arrays;
        private List<Long> ids;
    }

予防：

配列パラメータを受け取るときは2 つのデータ型String[]を使用できます。List<Long>
Map<String,Object> map受け取ったパラメータを使用する場合のValue型はObjecttype であり、追加する必要があります@RequestParam
オブジェクトを使用してUserパラメータを受け取る場合は、@RequestParam注釈を追加しないでください

フロントエンド呼び出しインターフェイスのコード

このパラメーター受け渡し方法では、フロントエンドはすべてのパラメーターを直接結合URL上できます。

        var request = new XMLHttpRequest();
        request.open('GET', 'http://localhost/user/1?userName=admin&arrays=a,b,c,d&ids=1&ids=2&ids=3&ids=4', true);
        request.responseType = 'json';
        request.onload = function () {
    
    
            var data = this.response;
            console.log(data);
        };
        request.send();

予防：

渡されたパラメータがURL安全でない場合は、次のことを行う必要があります。URLEncode
POST、、PUTメソッドはパラメータの受け渡しDELETEもサポートしていますURL。
このURLスプライシングを使用するブラウザごとにサポートされるパラメータの最大長は異なります。ブラウザごとにサポートされるパラメータの最大長は次のとおりです:

ブラウザ	URLの長さ制限
インターネットエクスプローラ	2048バイト
360 スピードブラウザ	65536バイト
Firefox(ブラウザ)	2118バイト
Safari(ブラウザ)	80000バイト
Opera(ブラウザ)	190000バイト
グーグルクローム）	8182バイト

2. HTTP ボディを通じてパラメータを渡す

パラメーターの受け渡しは、データの追加、データの変更、ファイルのアップロードなど、HTTP Bodyサーバーにデータを送信するために主にフロントエンドによって使用されます。パラメーターの受け渡しで一般的に使用される主なデータ形式は 3 つあります。Body

application/x-www-form-urlencodedつまり、フォーム送信bodyではメッセージ内のkey=valueスプライシングパラメータが使用されます。
application/jsonデータをJSONフォーマットに変換して入力しますBody。
multipart/form-dataファイルのアップロードに使用されます。

HTTPメッセージフォーマット

application/x-www-form-urlencodedメッセージのフォーマット:

POST /user3/1
Content-Type: application/x-www-form-urlencoded

userName=admin&arrays=a,b,c,d&ids=1&ids=2&ids=3&ids=4

application/jsonメッセージのフォーマット:

GET /user4/1
Content-Type: application/json

{
    "id": 1,
    "userName": "admin",
    "arrays": [
        "a",
        "b",
        "c",
        "d"
    ],
    "ids": [
        1,
        2,
        3,
        4
    ]
}

予防：

GETメソッドはBodyパラメータを渡すこともできます。GET メソッドはパラメータを渡せないと思っている人が多いですが、GET メソッドはBody渡すことしかできません。application/jsonこれを使用したことがある場合は、データを検索するときにデータがメソッドelasticsearchを介して渡されることを知っているはずです。GETJSON

バックエンドインターフェースコード

フレームワークで受け取られる型パラメータは、渡されるパラメータと共通であり、受け取りにはSpringMvcアノテーションが必要です。Bodyapplication/x-www-form-urlencodedURLQueryStringapplication/json@RequestBody

    @RequestMapping("/user3/{id}")
    public UserDTO user3(@PathVariable Long id, UserDTO user) {
    
    
        return user;
    }

    @RequestMapping("/user4/{id}")
    public UserDTO user4(@PathVariable Long id,@RequestBody UserDTO user) {
    
    
        return user;
    }

    @RequestMapping("/user5/{id}")
    public UserDTO user4(@PathVariable Long id,@RequestBody String user) {
    
    
        return JSONUtil.toBean(user,UserDTO.class);
    }

予防：

@RequestBodyアノテーションを直接使用して受信することも、アノテーションを使用して受信して手動で変換するDTOこともできます。この方法は、受信するデータにどのようなフィールドがあるかわからない場合に非常に便利で、送信された完全なデータを印刷できます。相手。StringDTO

フロントエンド呼び出しインターフェイスのコード

function sendFormUrl() {
    
    
        var request = new XMLHttpRequest();
        request.open('POST', 'http://localhost/user3/1', true);
        request.responseType = 'json';
        request.onload = function () {
    
    
            console.log(this.response);
        };
        var formData = new FormData();
        formData.append('userName', "admin");
        formData.append('arrays', "a,b,c,d");
        formData.append('ids', "1");
        formData.append('ids', "2");
        formData.append('ids', "3");
        formData.append('ids', "4");
        request.send(formData);
    }

    function sendJson() {
    
    
        var request = new XMLHttpRequest();
        request.open('POST', 'http://localhost/user4/1', true);
        request.responseType = 'json';
        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        request.onload = function () {
    
    
            console.log(this.response);
        };
        var body = {
    
    
            "userName": "admin",
            "arrays": [
                "a",
                "b",
                "c",
                "d"
            ],
            "ids": [
                1,
                2,
                3,
                4
            ]
        }
        request.send(JSON.stringify(body));
    }

予防：

multipart/form-data主にファイルのアップロードに使用されますが、私の別の記事「
1 つのデモでフロントエンドとバックエンドの大きなファイルの分割アップロード、再開可能なアップロード、インスタントアップロードを処理する」をパラメータ化できます。

ヘッダーを介してパラメータを渡す

パラメータの受け渡しは主に、一般的に使用されるなど、Headerいくつかの一般的なユーザー認証情報に使用されます。Authentication: Bearer Cookie

HTTPメッセージフォーマット

GET /user7/1
Accept: application/json
userName : admin
Cookie: userName=admin;
arrays: a,b,c,d
ids:1
ids:2
ids:3
ids:4

予防

SpringMVCを使用する場合、カスタムリクエストヘッダーが規格を満たしていないjava.lang.IllegalArgumentException: The HTTP header line [username : admin] does not conform to RFC 7230. The request has been rejected.ためリクエストが拒否されてしまう場合がありますが、設定を追加することで解決できます。userName
RFC 7230reject-illegal-header: off

application.yml追加した：

server:
  port: 80
  tomcat:
    reject-illegal-header: off

バックエンドインターフェースコード

Headerパラメータの取得は、request.getHeader(header)順次または@CookieValue次の方法で@RequestHeader取得できます。

    @RequestMapping("/user6/{id}")
    public User user6(@PathVariable Long id, HttpServletRequest request) {
    
    
        Enumeration<String> headerNames = request.getHeaderNames();
        while (headerNames.hasMoreElements()){
    
    
            String header= headerNames.nextElement();
            log.info("{}->{}",header,request.getHeader(header));
        }
        return User.builder().id(id).build();
    }

    @RequestMapping("/user7/{id}")
    public User user7(@PathVariable Long id, @CookieValue String userName, @RequestHeader String[] arrays, @RequestHeader List<Long> ids) {
    
    
        return User.builder().id(id).userName(userName).arrays(arrays).ids(ids).build();
    }

フロントエンド呼び出しインターフェイスのコード

    function sendHeader() {
    
    
        var request = new XMLHttpRequest();
        request.open('GET', 'http://localhost/user7/1', true);
        request.responseType = 'json';
        request.setRequestHeader("arrays","a,b,c,d");
        request.setRequestHeader("ids","1");
        request.setRequestHeader("ids","2");
        request.setRequestHeader("ids","3");
        request.setRequestHeader("ids","4");
        request.onload = function () {
    
    
            console.log(this.response);
        };
        request.send();
    }

予防：

Cookieブラウザによって自動的に追加されるため、request.setRequestHeader("userName","admin")追加する必要はありません

要約する

この記事では、フロントエンドとバックエンドで HTTP インターフェイスプロトコルを介してパラメータを渡す一般的な方法を要約し、HTTP プロトコル、バックエンド JAVA からの各パラメータのメッセージ形式、バックエンド取得方法、およびフロントエンド呼び出し方法を示します。コード、およびフロントエンド JS コード。もちろん、に基づくリアルタイムプッシュプロトコルなどwebsocket、より高度なパラメータ送信方法もいくつかあります。sseHTTP

フロントエンドとバックエンドで一般的に使用される HTTP インターフェイスプロトコルのパラメーター受け渡しメソッドを要約します。

序文

1. HTTP URL 経由でパラメータを渡す

HTTPメッセージフォーマット

バックエンドインターフェースコード

フロントエンド呼び出しインターフェイスのコード

2. HTTP ボディを通じてパラメータを渡す

HTTPメッセージフォーマット

バックエンドインターフェースコード

フロントエンド呼び出しインターフェイスのコード

ヘッダーを介してパラメータを渡す

HTTPメッセージフォーマット

バックエンドインターフェースコード

フロントエンド呼び出しインターフェイスのコード

要約する

おすすめ

フロントエンドとバックエンドで一般的に使用される HTTP インターフェイス プロトコルのパラメーター受け渡しメソッドを要約します。

序文

1. HTTP URL 経由でパラメータを渡す

HTTPメッセージフォーマット

バックエンドインターフェースコード

フロントエンド呼び出しインターフェイスのコード

2. HTTP ボディを通じてパラメータを渡す

HTTPメッセージフォーマット

バックエンドインターフェースコード

フロントエンド呼び出しインターフェイスのコード

ヘッダーを介してパラメータを渡す

HTTPメッセージフォーマット

バックエンドインターフェースコード

フロントエンド呼び出しインターフェイスのコード

要約する

おすすめ

フロントエンドとバックエンドで一般的に使用される HTTP インターフェイスプロトコルのパラメーター受け渡しメソッドを要約します。