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

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

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

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

JavaScript

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

CORS

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

Q&A

解決済

2回答

2402閲覧

golangでCORSが発生している

takeya60

総合スコア2

Go

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

JavaScript

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

CORS

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

0グッド

0クリップ

投稿2022/07/09 14:44

編集2022/07/09 22:59

やりたいこと

react(typescript)からherokuにデプロイしてあるgoのAPIにリクエストを送るとNo 'Access-Control-Allow-Origin' header is present on the requested resource.が出るので解決したいです。ローカルでgoのAPIを起動しreactからリクエストした際にはエラーが出ないです。Access-Control-Allow-Originで指定しているURLに間違いは無いと思います。

実装

go

1func GetTodoListWithUserId(w http.ResponseWriter, r *http.Request) { 2 w.Header().Set("Content-Type", "application/json") 3 w.Header().Set("Access-Control-Allow-Origin", "スキームとホスト名") 4 switch r.Method { 5 case "OPTIONS": 6 w.Header().Set("Access-Control-Allow-Headers", "*") 7 w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS") 8 return 9 } 10 w.Header().Set("Access-Control-Allow-Credentials", "true") 11 w.Header().Set("Access-Control-Allow-Headers", "*") 12 13 e := godotenv.Load() 14 if e != nil { 15 log.Println(e) 16 } 17 // dbConnectionInfo := fmt.Sprintf("%s:%s@tcp(127.0.0.1:3306)/go_todo?parseTime=true", os.Getenv("DB_USER"), os.Getenv("DB_PASSWORD")) 18 dbConnectionInfo := os.Getenv("DATABASE_URL") 19 db, err := sql.Open("mysql", dbConnectionInfo) 20 if err != nil { 21 log.Println(err) 22 } 23 defer db.Close() 24 25 isDone := r.URL.Query().Get("isdone") 26 27 tokenString := r.Header.Get("Authorization") 28 tokenString = strings.TrimPrefix(tokenString, "Bearer ") 29 30 var secretKey = os.Getenv("SECURITY_KEY") 31 32 claims := jwt.MapClaims{} 33 _, err = jwt.ParseWithClaims(tokenString, claims, func(userid *jwt.Token) (interface{}, error) { 34 return []byte(secretKey), nil 35 }) 36 if err != nil { 37 log.Println(err) 38 } 39 // do something with decoded claims 40 41 fmt.Println(claims["userid"]) 42 userID := claims["userid"] 43 44 token, err := auth.TokenVerify(tokenString) 45 log.Printf("request token=%s\n", token) 46 if err != nil { 47 log.Println("") 48 } else { 49 rows, err := db.Query("SELECT * FROM todos WHERE IsDone=? AND UserID=?", isDone, userID) 50 if err != nil { 51 log.Println(err) 52 } 53 54 defer rows.Close() 55 56 var data []TodoListWithUserID 57 58 for rows.Next() { 59 var todoList TodoList 60 61 err := rows.Scan( 62 &todoList.ID, 63 &todoList.UserID, 64 &todoList.Todo, 65 &todoList.CreatedAt, 66 &todoList.UpdatedAt, 67 &todoList.IsDone) 68 69 if err != nil { 70 log.Println(err) 71 } else { 72 data = append(data, TodoListWithUserID{ 73 ID: todoList.ID, 74 UserID: todoList.UserID, 75 Todo: todoList.Todo, 76 CreatedAt: todoList.CreatedAt, 77 UpdatedAt: todoList.UpdatedAt, 78 IsDone: todoList.IsDone, 79 }) 80 } 81 } 82 83 // jsonData, _ := json.Marshal(data) 84 85 json.NewEncoder(w).Encode(data) 86 } 87 88}

react

1import axios from "axios"; 2import { useEffect, useState } from "react"; 3 4type Todo = { 5 id: number; 6 userid: any; 7 todo: string; 8 createdat: Date; 9 updatedat: Date; 10 isDone: boolean; 11}; 12 13export const useGetTodos = (token: string) => { 14 const URL = `${process.env.REACT_APP_URL}/get-usertodoList`; 15 const [todos, setTodos] = useState<Todo[]>([]); 16 const [doneTodos, setDoneTodos] = useState<Todo[]>([]); 17 18 useEffect(() => { 19 axios 20 .get(URL, { params: { isdone: 0 }, headers: { Authorization: token } }) 21 .then((res) => { 22 setTodos(res.data); 23 }) 24 .catch((err) => { 25 console.log(err); 26 }); 27 28 axios 29 .get(URL, { 30 params: { isdone: 1 }, 31 headers: { Authorization: token }, 32 }) 33 .then((res) => { 34 setDoneTodos(res.data); 35 }) 36 .catch((err) => { 37 console.log(err); 38 }); 39 }, [token]); 40 41 return { todos, doneTodos }; 42};

お力を貸していただけたら幸いです。よろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

まずはデプロイ先のAPIをcurlでたたいてみてください。
(この場合CORSサポートは無関係にGET/POSTできるはず)

この時に指定した「スキームとホストアドレス」を「Access-Control-Allow-Origin」に指定すべきです。
例えば、https://myapp.heroku.com/api/hogehogeにてAPIの利用ができたのなら、https://myapp.heroku.comを指定すべきだし、
http://myapp.heroku.com:8080/api/hogehogeにてAPIの利用ができたのなら、http://myapp.heroku.com:8080を指定すべきでしょう。

投稿2022/07/10 04:34

nobonobo

総合スコア3367

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

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

takeya60

2022/07/10 05:29

回答いただきありがとうございます。試してみます!
takeya60

2022/07/10 13:05

herokuにデプロイしているapiを呼び出してみた結果、503エラーが発生していました。ローカルで立ち上げて呼び出した場合は正しく動いています。
nobonobo

2022/07/10 13:27

503エラーはどういう意味か調べてみて、まずはherokuの基礎的なサンプルを動かすところを確認してみることをおすすめします。
nobonobo

2022/07/10 13:41

herokuのlogsを示してもらえればどこで問題が起こっているのかアドバイスできるかもしれません。
takeya60

2022/07/10 14:08

herokuのlogsを再度見返してみるとデータベースのカラムが足りていないことに気がつきました。そこを修正したところ正しく動くようになりました。 とても丁寧な対応をしていただきありがとうございました!
guest

0

Access-Control-Allow-Originに指定するのは、URLではありません。オリジン(スキームとホスト名の組)です(MDN)。

投稿2022/07/09 22:09

maisumakun

総合スコア145208

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

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

takeya60

2022/07/09 23:02

回答ありがとうございます。私の表記の仕方がよくありませんでした。スキームとホスト名で指定しており、他のapiは同じ指定の仕方でエラーが発生していないのですが、このapiだけherokuにデプロイするとcors エラーが発生してしまう状況です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問