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

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

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

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

JavaScript

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

CORS

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

解決済

golangでCORSが発生している

takeya60
takeya60

総合スコア2

Go

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

JavaScript

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

CORS

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

2回答

0リアクション

0クリップ

856閲覧

投稿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

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) } }

react

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 }; };

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Go

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

JavaScript

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

CORS

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