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