axiosでgoで書いたサーバにリクエストを送信するとCORSポリシーでブロックされる

axiosを用いてサーバにリクエストを送信しているのですが、CORS policyによってブロックされてしまいます。
以下がaxiosを用いてリクエストを送信しているコードです。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Document</title>
7</head>
8
9<body>
10    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
11    <script>
12        axios.get("http://localhost:7500/lessons?id=13").then(response => {
13            console.log(response);
14        })
15    </script>
16</body>
17
18</html>

以下がサーバのコードです。

go
1package main
2
3import (
4	"net/http"
5)
6
7func f(w http.ResponseWriter, r *http.Request) {
8    w.Header().Set("Access-Control-Allow-Origin", "*")
9}
10
11func main() {
12	http.HandleFunc("/lessons/", f)
13	http.ListenAndServe(":7500", nil)
14}
15

以下が発生しているエラーメッセージです。

Access to XMLHttpRequest at 'http://localhost:7500/lessons?id=13' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

サーバの以下のコードを

go
1http.HandleFunc("/lessons/", f)

次のコードに

go
1http.HandleFunc("/lessons", f)

変更すればブロックされないのですが「lessons/1」などのパスにもマッチさせたいため、できればサーバのコードを変更せずに解決したいと考えています。
よろしくお願いします。

行動規範の内容に同意します

回答2件

/lessonsへのリクエストを/lessons/へリダイレクトするのはどうでしょうか。
（もしくは双方同じハンドラを割り当てるとか）

Goでは上記のような２つのURLは全く別物として扱いますので。

投稿2020/01/13 18:08

編集2020/01/13 18:13

nobonobo

総合スコア3367

ssssskkkkk

2020/01/14 01:19

すみません、リダイレクトでも実現できたのですが、他の方の回答の方が簡単に実現できそうだったので、そちらをベストアンサーにさせていただきました。

行動規範の内容に同意します

ベストアンサー

以下のコードをf関数に追記して、再度お試しください

func f(w http.ResponseWriter, r *http.Request) {
    	w.Header().Set("Access-Control-Allow-Origin", "*")
	w.Header().Set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
	w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS, POST, PUT, DELETE")

投稿2020/01/13 09:44

harinezumi.py

総合スコア282

ssssskkkkk

2020/01/13 09:50

コードを追加して試してみましたが、同じエラーが発生してしまいました。

harinezumi.py

2020/01/13 10:08

goのコードを以下のように修正してください package main import ( "fmt" "net/http" ) func f(w http.ResponseWriter, r *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "*") } func main() { http.HandleFunc("/lessons", f) http.ListenAndServe(":7500", nil) }

ssssskkkkk

2020/01/13 10:36

すみません、質問を途中まで書いた段階で投稿してしまっていたので、修正しました。修正内容にもあるのですが、「lessons/1」などのパスにもマッチさせたいため、http.HandleFuncの行は変更せずに解決したいと考えています。

harinezumi.py

2020/01/13 10:59

なるほど、これで行けるはずです axios.get("http://localhost:7500/lessons/?id=13").then(response => { console.log(response); })

ssssskkkkk

2020/01/14 01:12

ありがとうございます。無事解決しました。

harinezumi.py

2020/01/14 01:13

良かったです