GoのginとReact間でのCORSエラーについて

前提・実現したいこと

・GoのginでAPIサーバーを作っています。（localhost:8080）
・フロントエンドのReactから上記のAPIサーバへリクエストを送ります。（localhost:3000）

google chromeでReactの画面から画像データをAPIへと渡したいのですが、デベロッパーツールで下記のエラーメッセージが出てしまい、うまく動きません。

発生している問題・エラーメッセージ

input:1 Access to XMLHttpRequest at 'localhost:8000/producer/' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

試したこと

func Run() {
	r := gin.Default()

	r.Use(cors.New(cors.Config{
		// 許可したいHTTPメソッドの一覧
		AllowMethods: []string{
			"POST",
			"GET",
			"OPTIONS",
			"PUT",
			"DELETE",
		},
		// 許可したいHTTPリクエストヘッダの一覧
		AllowHeaders: []string{
			"Access-Control-Allow-Headers",
			"Content-Type",
			"Content-Length",
			"Accept-Encoding",
			"X-CSRF-Token",
			"Authorization",
		},
		// 許可したいアクセス元の一覧
		AllowOrigins: []string{
			"http://localhost:3000",
			"http://localhost:8080",
			"http://localhost",
		},
	}))
	
	r.POST("/", controller.Top)
	r.Run(":8080")
	
}

CORSというものに対して理解がまったくなかったのですが、ぐぐってみると上記の設定がサーバーサイド(GoのGin)側で必要とのことだったのですが、
いろいろと許可したいアクセス元の一覧にURLを入れてみてますが、一向にエラーがなおらず困っています。
chromeの拡張機能 access control allow origin:* を使ってみましたがこれもうまくいきませんでした。

根本的に何か思い違いをしていそうだなと思っていますが、どなたか教えていただけると幸いです。