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

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

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

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

CORS

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

Q&A

解決済

1回答

2526閲覧

Cors, サーバーかフロントかどちらで失敗しているのか

h37kouya

総合スコア6

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

CORS

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

0グッド

1クリップ

投稿2020/04/29 12:38

Corsでサーバかフロントのどちらで失敗しているのか

環境

フロント

Three.js/Nuxt.js

サーバー

Laravel6
サーバーはphp artisan serveにて起動

エラー内容

Access to XMLHttpRequest at 'http://localhost:8000/storage/example/bunny.obj' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. GET http://localhost:8000/storage/example/bunny.obj net::ERR_FAILED

ネットワークタブ

Responese Header Connection: close Content-Length: 205915 Content-Type: application/x-tgif Date: Wed, 29 Apr 2020 12:13:45 GMT Host: localhost:8000 Request Header Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: ja,en;q=0.9 Cache-Control: no-cache Connection: keep-alive Host: localhost:8000 Origin: http://localhost:3000 Pragma: no-cache Referer: http://localhost:3000/pages/admin/storages/1581315433ra05d0 Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36

イメージ説明

フロントの対象コード

js

1const path = "http://localhost:8000/storage/example/bunny.obj" 2const objLoader = new THREE.OBJLoader() 3objLoader.load(path, (obj) => { 4 const objmodel = obj.clone() 5 objmodel.scale.set(100, 100, 100) // 縮尺の初期化 6 objmodel.rotation.set(0, 0, 0) // 角度の初期化 7 objmodel.position.set(0, 0, 0) // 位置の初期化 8 9 // objをObject3Dで包む 10 const obj3d = new THREE.Object3D() 11 obj3d.add(objmodel) 12 13 this.scene.add(obj3d) // sceneに追加 14})

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

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

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

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

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

guest

回答1

0

ベストアンサー

エラーメッセージが「No 'Access-Control-Allow-Origin' header is present on the requested resource.」なので、サーバー側で Access-Control-Allow-Origin ヘッダを出力していないのが原因だと思います。

投稿2020/04/29 13:14

ockeghem

総合スコア11705

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

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

h37kouya

2020/04/29 13:19

ありがとうございます。 サーバー側でファイルにヘッダを付加するように実装したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問