やりたいこと
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};
お力を貸していただけたら幸いです。よろしくお願いします。

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/07/10 05:29
2022/07/10 13:05
2022/07/10 13:27
2022/07/10 13:41
2022/07/10 14:08