golangでCORSが発生している

Question

やりたいこと

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に間違いは無いと思います。

実装

func GetTodoListWithUserId(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "application/json")
	w.Header().Set("Access-Control-Allow-Origin", "スキームとホスト名")
	switch r.Method {
	case "OPTIONS":
		w.Header().Set("Access-Control-Allow-Headers", "*")
		w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
		return
	}
	w.Header().Set("Access-Control-Allow-Credentials", "true")
	w.Header().Set("Access-Control-Allow-Headers", "*")

	e := godotenv.Load()
	if e != nil {
		log.Println(e)
	}
	// dbConnectionInfo := fmt.Sprintf("%s:%s@tcp(127.0.0.1:3306)/go_todo?parseTime=true", os.Getenv("DB_USER"), os.Getenv("DB_PASSWORD"))
	dbConnectionInfo := os.Getenv("DATABASE_URL")
	db, err := sql.Open("mysql", dbConnectionInfo)
	if err != nil {
		log.Println(err)
	}
	defer db.Close()

	isDone := r.URL.Query().Get("isdone")

	tokenString := r.Header.Get("Authorization")
	tokenString = strings.TrimPrefix(tokenString, "Bearer ")

	var secretKey = os.Getenv("SECURITY_KEY")

	claims := jwt.MapClaims{}
	_, err = jwt.ParseWithClaims(tokenString, claims, func(userid *jwt.Token) (interface{}, error) {
		return []byte(secretKey), nil
	})
	if err != nil {
		log.Println(err)
	}
	// do something with decoded claims

	fmt.Println(claims["userid"])
	userID := claims["userid"]

	token, err := auth.TokenVerify(tokenString)
	log.Printf("request token=%s\n", token)
	if err != nil {
		log.Println("")
	} else {
		rows, err := db.Query("SELECT * FROM todos WHERE IsDone=? AND UserID=?", isDone, userID)
		if err != nil {
			log.Println(err)
		}

		defer rows.Close()

		var data []TodoListWithUserID

		for rows.Next() {
			var todoList TodoList

			err := rows.Scan(
				&todoList.ID,
				&todoList.UserID,
				&todoList.Todo,
				&todoList.CreatedAt,
				&todoList.UpdatedAt,
				&todoList.IsDone)

			if err != nil {
				log.Println(err)
			} else {
				data = append(data, TodoListWithUserID{
					ID:        todoList.ID,
					UserID:    todoList.UserID,
					Todo:      todoList.Todo,
					CreatedAt: todoList.CreatedAt,
					UpdatedAt: todoList.UpdatedAt,
					IsDone:    todoList.IsDone,
				})
			}
		}

		// jsonData, _ := json.Marshal(data)

		json.NewEncoder(w).Encode(data)
	}

}

import axios from "axios";
import { useEffect, useState } from "react";

type Todo = {
  id: number;
  userid: any;
  todo: string;
  createdat: Date;
  updatedat: Date;
  isDone: boolean;
};

export const useGetTodos = (token: string) => {
  const URL = `${process.env.REACT_APP_URL}/get-usertodoList`;
  const [todos, setTodos] = useState<Todo[]>([]);
  const [doneTodos, setDoneTodos] = useState<Todo[]>([]);

  useEffect(() => {
    axios
      .get(URL, { params: { isdone: 0 }, headers: { Authorization: token } })
      .then((res) => {
        setTodos(res.data);
      })
      .catch((err) => {
        console.log(err);
      });

    axios
      .get(URL, {
        params: { isdone: 1 },
        headers: { Authorization: token },
      })
      .then((res) => {
        setDoneTodos(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [token]);

  return { todos, doneTodos };
};

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

Answer 1

まずはデプロイ先の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を指定すべきでしょう。

Comments

[takeya60]

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

[takeya60]

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

[nobonobo]

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

[nobonobo]

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

[takeya60]

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

Answer 2

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

Comments

[takeya60]

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