質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2227閲覧

React + Rails(API) のアプリでSafariからログインできなくなった

GenkiSugiyama

総合スコア86

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/04/23 09:46

編集2020/04/25 04:00

発生している問題・エラーメッセージ

これまで問題なく動いていたアプリのログイン周りの機能が、safariだけ機能しなくなり、safariユーザーがアプリに新規登録・ログインができなくなりました。

###ログイン機能の実装方法
Rails側ではdevise + devise token authを用いてログイン機能を実装しており、React側からPOST API通信でユーザー情報を送信しています。

【React】

JavaScript

1const end_point = 'http://localhost:3001'; 2 const agent = new https.Agent({ 3 rejectUnauthorized: false, 4 }); 5let header = { 6 'Content-Type': 'application/json', 7 'Accept': 'application/json', 8 'access-token': ``, 9 'client': ``, 10 'uid': ``, 11} 12let myHttpClient = axios.create({ 13 xhrFields: { 14 withCredentials: true, 15 }, 16 httpsAgent : agent, 17 headers : header, 18 data : {}, 19}); 20 21// ログイン 22export async function post_login_api(action, data) { 23 let postResponse = ''; 24 try { 25 postResponse = await myHttpClient.post(end_point + action, data); 26 } 27 catch (error){ 28 return "loginfalse"; 29 } 30 return postResponse; 31} 32 33//ログインボタン押下時の処理 34post_login_api('api/v1/auth/sign_in', loginData).then((result) => { 35 if (result == 'loginfalse') { 36 setLoading(false); 37 window.scrollTo(0, 0); 38 alert("メールアドレス・パスワードが正しくありません。"); 39 return; 40 } else { 41 dispatch({ 42 type: 'ADD_USERID', 43 value: result.data.data.id 44 }); 45 dispatch({ 46 type: 'ADD_USERHEADER', 47 access: result.headers["access-token"], 48 client: result.headers.client, 49 uid: result.headers.uid, 50 }); 51 // TOP画面に遷移 52 dispatch(push('/top')) 53 } 54})

safariブラウザのセキュリティバージョンアップ(https://support.apple.com/ja-jp/HT211102)が行われたことによる、クロスドメイン?対応の強化による最新のSafariブラウザで発生する障害であることまでは判明しました。

プログラムの修正と言うよりかは、サーバー側の設定の修正が必要ではないかと言うことなのですが、
自分の経験が浅く何をどのように改修すれば修正に繋がるのかがわからず困っています。

修正方法についてご教示いただけると助かります。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2020/04/23 09:53

ログインをどのように実装してるのでしょうか?
GenkiSugiyama

2020/04/23 10:37

ログイン方法について追記致しました。 ご確認お願いいたします。
guest

回答1

0

自己解決

別質問にて上げ直すためこの質問は閉じます

投稿2020/04/25 05:26

GenkiSugiyama

総合スコア86

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問