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

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

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

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

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

CORS

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

1回答

1498閲覧

vue.jsとgo apiサーバーのcors設定がうまく出来ない

sinsinpurin

総合スコア5

Vue.js

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

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

CORS

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2020/03/16 10:50

corsの設定で悩んでいます
どう設定したらエラーがなくなるか、何が原因なのかがわかりません。
フロントとバックは別のサーバーを使っているためcorsを使用する前提でお願いします。

フロント firebase hosting
vue-cli (https://VueServer)

バックエンド heroku
goa design (https://APIServer)

###発生したエラー

Access to XMLHttpRequest at 'https://APIServer' from origin 'https://VueServer' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

トップページはリクエストヘッダーにAccess-Control-Allow-Originがあるのですが、別のページに遷移するとAccess-Control-Allow-Originがなくなっているのがchromeのデベロッパーモードで確認しました。
Access-Control-Allow-Originがないと書いてありますがaxiosの方で設定していように思えます、、、

Vue

requests.js

1import axios from "axios"; 2 3function request(method, url, options) { 4 var promise = null; 5 var params = {}; 6 var headers = {}; 7 if (options.params) { 8 // リクエストパラメーターのセット 9 params = options.params; 10 } 11 12 if (options.headers) { 13 // カスタムヘッダーのセット 14 headers = options.headers; 15 } 16 headers = { 17 'X-Requested-With': 'XMLHttpRequest', 18 'Content-Type': 'application/json', 19 'Access-Control-Allow-Origin': 'https://VueServer', 20 'crossDomain': true 21 } 22 23 promise = axios({ 24 method: method, 25 url: url, 26 data: params, 27 headers: headers, 28 }); 29 promise.catch(function () { 30 return console.log(promise); 31 }); 32 return promise; 33} 34export function Get(url, options) { 35 return request("get", url, options); 36} 37export function Post(url, options) { 38 return request("post", url, options); 39} 40export function Put(url, options) { 41 return request("put", url, options); 42} 43export function Delete(url, options) { 44 return request("delete", url, options); 45}

apiの叩きかたはこんな感じにしています

api.js

1export function postCardInfo(param) { 2 return Post(baseUrl + "/card", { 3 params: param, 4 }) 5}

goa design

design.go

1 2 cors.Origin("https://VueServer", func() { 3 cors.Headers("X-Requested-With", "Content-Type", "application/json", "text/plain", "Origin", "Accept") 4 cors.Methods("GET", "POST", "PATCH", "PUT", "DELETE", "OPTIONS") 5 cors.Expose("X-Time") 6 cors.MaxAge(600) 7 }) 8

cors "goa.design/plugins/v3/cors/dsl"
goa designのcorsプラグインを使用しています。

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

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

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

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

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

guest

回答1

0

当該のプラグイン等については知らないのですが、少なくとも言えることは、Access-Control-Allow-Originはリクエストヘッダではなくレスポンスヘッダとして必要です。
なので、以下の「これは不要」とした行は削除してください。

Vue

1import axios from "axios"; 2 3function request(method, url, options) { 4 // 中略 5 headers = { 6 'X-Requested-With': 'XMLHttpRequest', 7 'Content-Type': 'application/json', 8 'Access-Control-Allow-Origin': 'https://VueServer', // ← これは不要 9 'crossDomain': true 10 }

「あってもいいじゃないか?」と思われるかもしれませんが、上記があると、「このリクエストヘッダに対する許可」が必要になります。不要なリクエストヘッダをつけると動かなくなります。
その上で、APIサーバー側のレスポンスヘッダとして以下が出力されるように調整してください。

HTTP

1Access-Control-Allow-Origin: https://VueServer

投稿2020/03/16 14:00

ockeghem

総合スコア11701

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問