LINEログインを実装しようとしたら、CORSで弾かれた件

LINEログインを実装しようとしたら、CORSで弾かれた件:

Lineログインを実装していたら、CORSでうまくいきませんでした。。。

その時のやったことを備忘として記載しておきます。

やりたいこと

• 自フォームでPOSTさせて、自サーバから結果が返ってきたらLineLogin側にGETメソッドを飛ばしてLINE LOGINさせる

自サイト→LineLoginっていう順番を崩したくなかった。

やったこと

formの登録ボタン(onclick)→js→ajaxで自サイトでの登録→ajaxでLine側へGET

function entry(myParam){ 
    $.ajax({ 
        type    : 'POST', 
        url     : '/entry', 
        data    : myParams 
    }).done(function(data, textStatus, jqXHR) { 
        // 成功時 
        $.ajax({ 
            type    : 'GET', 
            url     : 'https://access.line.me/oauth2/v2.1/authorize', 
            data    : { 
                        response_type: "code", 
                        client_id: xxx, 
                        redirect_uri: xxx, 
                        state: xxx, 
                        scope: "profile" 
            } 
        }) 
    }); 
} 

実際のコードとはちょっと違いますが、

察してください。

とまあ、それで送るとこんなのが返ってくる


Access to XMLHttpRequest at 'https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=xxx&redirect_uri=https://xxx&scope=profile&_csrf=xxx' from origin 'https://myService.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ajaxで送るときのheaderにAccess-Control-Allow-Originを設定してみたけどだめ。

（相手側に設定すべき項目ですよね。今回はLineなんで諦め。）

ここみて勉強しました。

[https://qiita.com/mochizukikotaro/items/6b72ad595db8a6b5514f]

結論

いいのかわかりませんが、

formの登録ボタン(onclick)→js→ajaxで自サイトでの登録→jsでformのsubmitをすることで、LineへGET

とすることで、うまくいきました。

<form id="mainForm" name="mainForm" modelAttribute="mainForm" class="form" method="get" action="https://access.line.me/oauth2/v2.1/authorize"> 

function entry(myParam){ 
    $.ajax({ 
        type    : 'POST', 
        url     : '/entry', 
        data    : myParams 
    }).done(function(data, textStatus, jqXHR) { 
        // 成功時 
        // formにパラメータをセット 
        ... 
        // submit 
        document.mainForm.submit(); 
    }); 
} 

まぁ確かに、わざわざajaxにする必要もないですね。