JavaScript
Line
CORS
LineLogin

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にする必要もないですね。