Railway•6mo ago

Cors problem in deployment (react + go)

Helo people, I'm aware there's been bunch of similar issue presented and resolved, yet I did all I could and still no luck. project ID: 443e27d8-9cdf-478d-a4ec-c846823facf8 I'm getting

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.diplomacy.network/peace. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 405.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.diplomacy.network/peace. (Reason: CORS request did not succeed). Status code: (null)..

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.diplomacy.network/peace. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 405.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.diplomacy.network/peace. (Reason: CORS request did not succeed). Status code: (null)..

I got below config in go:

corsMiddleware := handlers.CORS(
        handlers.AllowedOrigins([]string{
            "https://diplomacy.network",
            "http://localhost:3000",
        }),
        handlers.AllowedMethods([]string{
            http.MethodGet, http.MethodPost, http.MethodPut, http.MethodDelete, http.MethodOptions, // Specify allowed methods
        }),
        handlers.AllowedHeaders([]string{
            "Content-Type", "Access-Control-Allow-Origin",
        }),
    )

corsMiddleware := handlers.CORS(
        handlers.AllowedOrigins([]string{
            "https://diplomacy.network",
            "http://localhost:3000",
        }),
        handlers.AllowedMethods([]string{
            http.MethodGet, http.MethodPost, http.MethodPut, http.MethodDelete, http.MethodOptions, // Specify allowed methods
        }),
        handlers.AllowedHeaders([]string{
            "Content-Type", "Access-Control-Allow-Origin",
        }),
    )

and making request like below from the react: (to https url)

 try {
      const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/peace`;
      console.log("API URL:", apiUrl);
      await axios.post(apiUrl, {
        peacemakers: [updatedPeacemaker, peacemakers[1]],
      });
      alert("Update successful!");
    } catch (error) {
      console.error("Error sending POST request:", error);
      alert("Failed to update.");
    }

 try {
      const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/peace`;
      console.log("API URL:", apiUrl);
      await axios.post(apiUrl, {
        peacemakers: [updatedPeacemaker, peacemakers[1]],
      });
      alert("Update successful!");
    } catch (error) {
      console.error("Error sending POST request:", error);
      alert("Failed to update.");
    }

Solution:

Here is the code I used, I was not able to reproduce the issue, even with cloudflare in front - ```gopackage main import ( "cmp"...

Jump to solution

18 Replies

Percy•6mo ago

Project ID: 443e27d8-9cdf-478d-a4ec-c846823facf8

Brody•6mo ago

what is NEXT_PUBLIC_API_URL set to?

streamerdOP•6mo ago

https://api.diplomacy.network without trailing /

Brody•6mo ago

have you confirmed that headers are being set locally?

streamerdOP•6mo ago

no headers set by the react explicitly, but seeing some req headers set on the browser ( @ local)

Brody•6mo ago

react is a framework, its not going to be setting headers, can you elaborate on what you mean by that?

streamerdOP•6mo ago

all the headers we got are set automatically by the browser. none I've additionally set via axios library

Brody•6mo ago

im sorry but that isnt answering the questions ive asked have you confirmed that CORS headers are being set locally?

streamerdOP•6mo ago

I haven't manualy set any so far. But now I've set below and didn't change anything.

    headers: {
            "Content-Type": "application/json", 
            Accept: "application/json",
          },

    headers: {
            "Content-Type": "application/json", 
            Accept: "application/json",
          },

Brody•6mo ago

This also does not answer the question, im not sure where the confusion is coming from? ill try to clarify further, have you confirmed that your go backend setting the cors headers when testing locally?

streamerdOP•6mo ago

yes locally my go backend sets access-control-allow origin as localhost:3000 (my react app) successfully.

streamerdOP•6mo ago

and that's not the case when I switch to prod endpoint

streamerdOP•6mo ago

would that be a revelant response @Brody ?

Brody•6mo ago

what go web framework and middleware for cors are you using? I'll try to get a reproducible example going

streamerdOP•6mo ago

hey I'm using gorilla for cors config here is the code: https://github.com/demo-verse/proof-of-peacemaking-generator/blob/main/main.go

GitHub

proof-of-peacemaking-generator/main.go at main · demo-verse/proof-o...

A simple web tool to generate Proof of Peacemaking certificates (work in progress) - demo-verse/proof-of-peacemaking-generator

Brody•6mo ago

I thought gorilla had an easy way to chain middlewares

Solution

Brody•6mo ago

Here is the code I used, I was not able to reproduce the issue, even with cloudflare in front -

gopackage main

import (
    "cmp"
    "log"
    "net/http"
    "os"

    "github.com/gorilla/handlers"
)

func main() {
    log.Println("Configuring CORS")

    corsMiddleware := handlers.CORS(
        handlers.AllowedOrigins([]string{
            "https://renewed-warmth-production.up.railway.app",
            "http://localhost:3000",
            "http://127.0.0.1:3000",
        }),
        handlers.AllowedMethods([]string{
            http.MethodGet, http.MethodPost, http.MethodPut, http.MethodDelete, http.MethodOptions,
        }),
        handlers.AllowedHeaders([]string{
            "Content-Type", "Access-Control-Allow-Origin",
        }),
    )

    wrapperTest := func(w http.ResponseWriter, r *http.Request) {
        handler := corsMiddleware(http.HandlerFunc(handleTest))
        handler.ServeHTTP(w, r)
    }

    http.HandleFunc("GET /test", wrapperTest)
    http.HandleFunc("POST /test", wrapperTest)

    port := cmp.Or(os.Getenv("PORT"), "3030")

    log.Fatal(http.ListenAndServe((":" + port), nil))
}

func handleTest(w http.ResponseWriter, r *http.Request) {
    w.Write([]byte("Hello, world!"))
}

gopackage main

import (
    "cmp"
    "log"
    "net/http"
    "os"

    "github.com/gorilla/handlers"
)

func main() {
    log.Println("Configuring CORS")

    corsMiddleware := handlers.CORS(
        handlers.AllowedOrigins([]string{
            "https://renewed-warmth-production.up.railway.app",
            "http://localhost:3000",
            "http://127.0.0.1:3000",
        }),
        handlers.AllowedMethods([]string{
            http.MethodGet, http.MethodPost, http.MethodPut, http.MethodDelete, http.MethodOptions,
        }),
        handlers.AllowedHeaders([]string{
            "Content-Type", "Access-Control-Allow-Origin",
        }),
    )

    wrapperTest := func(w http.ResponseWriter, r *http.Request) {
        handler := corsMiddleware(http.HandlerFunc(handleTest))
        handler.ServeHTTP(w, r)
    }

    http.HandleFunc("GET /test", wrapperTest)
    http.HandleFunc("POST /test", wrapperTest)

    port := cmp.Or(os.Getenv("PORT"), "3030")

    log.Fatal(http.ListenAndServe((":" + port), nil))
}

func handleTest(w http.ResponseWriter, r *http.Request) {
    w.Write([]byte("Hello, world!"))
}

Brody•6mo ago

perhaps you have something missconfigured with cloudflare? either way, this would not be an issue with Railway

Gaming

Programming

Cors problem in deployment (react + go)