Railway•4mo 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•4mo ago

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

Brody•4mo ago

what is NEXT_PUBLIC_API_URL set to?

streamerd•4mo ago

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

Brody•4mo ago

have you confirmed that headers are being set locally?

streamerd•4mo ago

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

Brody•4mo ago

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

streamerd•4mo ago

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

Brody•4mo ago

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

streamerd•4mo 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•4mo 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?

streamerd•4mo ago

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

streamerd•4mo ago

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

streamerd•4mo ago

would that be a revelant response @Brody ?

Brody•4mo ago

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

streamerd•4mo 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

Gaming

Programming

Cors problem in deployment (react + go)