CORS error when using POST method in generated API with Swagger UI

[Kahoulam]

Description:

I'm experiencing a CORS error when trying to use the POST method in the generated API through the Swagger UI. The GET method works fine, but when I try to use the POST method, I get the following error:

Failed to fetch.
Possible Reasons:

CORS
Network Failure
URL scheme must be "http" or "https" for CORS request.

Steps to Reproduce:

1. Use the following design to generate the API.
2. Start the server.
3. Load the generated OpenAPI3 YAML file in Swagger UI.
4. Use Swagger UI to test the API:
   • GET /add/1/2 works without any issues.
   • POST /multiply causes the CORS error.

Code

• design.go:

package design

import (
    . "goa.design/goa/v3/dsl"
    cors "goa.design/plugins/v3/cors/dsl"
)

var _ = API("calc", func() {
    Title("Calculator Service")
    Description("Service for multiplying numbers, a Goa teaser")
    cors.Origin("*")
    Server("calc", func() {
        Host("localhost", func() {
            URI("http://localhost:8000")
        })
    })
})

var _ = Service("calc", func() {
    Description("The calc service performs operations on numbers.")

    Method("multiply", func() {
        Payload(func() {
            Field(1, "a", Int, "Left operand")
            Field(2, "b", Int, "Right operand")
            Required("a", "b")
        })

        Result(Int)

        HTTP(func() {
            POST("/multiply")
        })
    })

    Method("add", func() {
        Description("Add adds up the two integer parameters and returns the results.")
        Payload(func() {
            Attribute("a", Int, func() {
                Description("Left operand")
                Example(1)
            })
            Attribute("b", Int, func() {
                Description("Right operand")
                Example(2)
            })
            Required("a", "b")
        })
        Result(Int, func() {
            Description("Result of addition")
            Example(3)
        })
        HTTP(func() {
            GET("/add/{a}/{b}")

            Response(StatusOK)
        })
    })

})

• main.go:

  
  package main

import ( "calc/gen/calc" "calc/gen/http/calc/server" "context" "net/http"

goahttp "goa.design/goa/v3/http"

)

type svc struct{}

func (s svc) Multiply(ctx context.Context, p calc.MultiplyPayload) (int, error) { return p.A * p.B, nil }

func (s svc) Add(ctx context.Context, p calc.AddPayload) (res int, err error) { return p.A + p.B, nil }

func main() { s := &svc{} endpoints := calc.NewEndpoints(s) mux := goahttp.NewMuxer() dec := goahttp.RequestDecoder enc := goahttp.ResponseEncoder svr := server.New(endpoints, mux, dec, enc, nil, nil) server.Mount(mux, svr) httpsvr := &http.Server{ Addr: "localhost:8000", Handler: mux, } if err := httpsvr.ListenAndServe(); err != nil { panic(err) } }

## Screenshot
<img width="1132" alt="image" src="https://github.com/goadesign/plugins/assets/45899676/6954f277-4914-4241-af6c-00a8eeee70d9">

<img width="1134" alt="image" src="https://github.com/goadesign/plugins/assets/45899676/eb756664-b38b-4cd9-b722-881ba85b2f55">

[Kahoulam]

The issue with the CORS error on the POST /multiply endpoint has been resolved by configuring CORS globally in the goa.design API. Here is the solution that worked:

cors.Origin("*", func() {
    cors.Headers("Authorization", "Content-Type")
    cors.Methods("POST",
})