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

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

新規登録して質問してみよう
ただいま回答率
85.51%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

XHR

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSRF

クロスサイトリクエストフォージェリ (Cross site request forgeries、CSRF)は、 外部Webページから、HTTPリクエストによって、 Webサイトの機能の一部が実行されてしまうWWWにおける攻撃手法です。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

0回答

4136閲覧

iPhoneのSafariからaxiosが動作しない。

NunomuraT

総合スコア6

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

XHR

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSRF

クロスサイトリクエストフォージェリ (Cross site request forgeries、CSRF)は、 外部Webページから、HTTPリクエストによって、 Webサイトの機能の一部が実行されてしまうWWWにおける攻撃手法です。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/02/13 16:17

編集2022/01/12 10:55

お疲れ様です。

自力で解決できそうにないため、
みなさまのお力をお借りしたく思います。

前提・実現したいこと

〇前提
laravel + vueでspaを作成しました。
テスト環境にデプロイ済みです。

PC用ブラウザでは問題なく、動作するのですが、
iphone用ブラウザでは上手く動作しません。
※iphone以外のmobileの動作は未検証です。

〇希望
axios.getでデータを取得したいのですが、動作しません。

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

以下、エラーメッセージです。

〇エラーメッセージ

SyntaxError (DOM Exception 12): The string did not match the expected pattern.

該当のソースコード

以下、問題の発生箇所です。自分で実装したものではありません。
axiosのカスタムヘッダーの設定をしているようです。
※axiosのネイティブコードです。

// Add headers to the request if ('setRequestHeader' in request) { utils.forEach(requestHeaders, function setRequestHeader(val, key) { if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') { // Remove Content-Type if data is undefined delete requestHeaders[key]; } else { // Otherwise add header to the request request.setRequestHeader(key, val); } }); }

念のため、axiosのヘッダー設定ソースを

window.axios.defaults.headers.common = { 'X-CSRF-TOKEN': window.Laravel.csrfToken, 'X-Requested-With': XMLHttpRequest }

試したこと

Safariではes6対応していないとのことなとで、poryfillの参照を追加しました。
PC版のSafariでは動作するようになったものの、iPhone用Safariでは動作しません...

補足情報(FW/ツールのバージョンなど)

以下、各バージョンです。
php 7.2.0
laravel 5.5.0
vue.js 2.5.7
vue-router 2.8.1

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

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

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

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

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

aro10

2018/02/14 11:42 編集

何も試せていないという事なので、問題範囲を局所化するために、 カスタムヘッダー等を設定していないシンプルなaxios/axiosとLaravelのAPIでのプログラムコードを作ってまずは原因切り分けを図ると良いかと思います。 [axios/axios](https://github.com/axios/axios)
kozy4324

2018/03/06 03:41

iOSのSafariでのみ、HTTPリクエストヘッダーの値に文字列以外を渡したり、また値の先頭にスペースを含んでいると該当のエラーが出るような気がします。window.Laravel.csrfTokenやXMLHttpRequestがどういった値かをチェックするのがよろしいのでは?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問