enable CORS

frontend/src/CoffeeList.jsx

@@ -1,44 +1,32 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Table from "react-bootstrap/Table";
 import axios from "axios";
-import { useState } from "react";
-import { useEffect } from "react";
+
+const Products = ({ products }) =>
+  products.map((product) => (
+    <tr key={product.id}>
+      <td>{product.name}</td>
+      <td>{product.price}</td>
+      <td>{product.sku}</td>
+    </tr>
+  ));
 
 const CoffeeList = () => {
-  const [state, setState] = useState({ products: [] });
+  const [products, setProducts] = useState([]);
 
   useEffect(() => {
+    const readData = () => {
+      axios
+        .get(window.global.api_location + "/products")
+        .then((response) => {
+          setProducts(response.data);
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    };
     readData();
-  });
-
-  const readData = () => {
-    axios
-      .get(window.global.api_location + "/products")
-      .then((response) => {
-        console.log(response.data);
-
-        setState({ products: response.data });
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
-  const getProducts = () => {
-    let table = [];
-
-    for (let i = 0; i < state.products.length; i++) {
-      table.push(
-        <tr key={i}>
-          <td>{state.products[i].name}</td>
-          <td>{state.products[i].price}</td>
-          <td>{state.products[i].sku}</td>
-        </tr>
-      );
-    }
-
-    return table;
-  };
+  }, []);
 
   return (
     <div>
@@ -51,7 +39,9 @@ const CoffeeList = () => {
             <th>SKU</th>
           </tr>
         </thead>
-        <tbody>{getProducts()}</tbody>
+        <tbody>
+          <Products products={products} />
+        </tbody>
       </Table>
     </div>
   );

go.mod

@@ -10,6 +10,7 @@ require (
 	github.com/go-openapi/validate v0.19.10
 	github.com/go-playground/universal-translator v0.17.0 // indirect
 	github.com/go-playground/validator v9.31.0+incompatible
+	github.com/gorilla/handlers v1.4.2
 	github.com/gorilla/mux v1.7.4
 	github.com/leodido/go-urn v1.2.0 // indirect
 	go.mongodb.org/mongo-driver v1.3.5 // indirect

go.sum

@@ -121,6 +121,8 @@ github.com/google/go-cmp v0.3.0/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMyw
 github.com/google/uuid v1.0.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/google/uuid v1.1.1 h1:Gkbcsh/GbpXz7lPftLA3P6TYMwjCLYm83jiFQZF/3gY=
 github.com/google/uuid v1.1.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gorilla/handlers v1.4.2 h1:0QniY0USkHQ1RGCLfKxeNHK9bkDHGRYGNDFBCS+YARg=
+github.com/gorilla/handlers v1.4.2/go.mod h1:Qkdc/uu4tH4g6mTK6auzZ766c4CA0Ng8+o/OAirnOIQ=
 github.com/gorilla/mux v1.7.4 h1:VuZ8uybHlWmqV03+zRzdwKL4tUnIp1MAQtp1mIFE1bc=
 github.com/gorilla/mux v1.7.4/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
 github.com/inconshreveable/mousetrap v1.0.0/go.mod h1:PxqpIevigyE2G7u3NXJIT2ANytuPF1OarO4DADm73n8=

main.go

@@ -16,6 +16,9 @@ import (
 const port = ":5000"
 const productPath = "/products"
 
+// allowed consumers. Use "*" for public API only.
+var origins = []string{"http://localhost:3000"}
+
 func main() {
 	// create a logger to control application wide logging
 	logger := log.New(os.Stdout, "Product API: ", log.LstdFlags|log.Lshortfile)
@@ -30,7 +33,7 @@ func main() {
 	productsHandler.RegisterRoutes(router, productPath)
 
 	// creates a production-ready server using the handler
-	srv := server.New(router, port)
+	srv := server.New(router, port, origins)
 
 	// start a non blocking application server
 	go func() {

server/server.go

@@ -3,13 +3,17 @@ package server
 import (
 	"net/http"
 	"time"
+
+	gohandlers "github.com/gorilla/handlers"
 )
 
 // New creates a server using given mux and port
-func New(mux http.Handler, port string) *http.Server {
+func New(mux http.Handler, port string, origins []string) *http.Server {
+	// CORS
+	corsHandler := gohandlers.CORS(gohandlers.AllowedOrigins(origins))
 	return &http.Server{
 		Addr:         port,
-		Handler:      mux,
+		Handler:      corsHandler(mux),
 		ReadTimeout:  5 * time.Second,
 		WriteTimeout: 10 * time.Second,
 		IdleTimeout:  120 * time.Second, // keep connection opened to prevent Ddos attacks