Why Is My Subdomain\'s API Server Throwing a CORS Error?

Failed to Access Subdomain from Main Domain: Missing 'Access-Control-Allow-Origin' Header

Problem Summary

When accessing a subdomain's API server from the main domain, a CORS policy error is encountered: "No 'Access-Control-Allow-Origin' header is present on the requested resource."

Preflight Check Considerations

Before delving into potential solutions, it's crucial to verify the preflight request using the Chrome DevTools to rule out caching issues and identify the appropriate request type for further troubleshooting.

Diagnostic Steps

• Inspect CORS Settings: Ensure that the server-side code correctly implements CORS and adds the необхідné headers.
• Check Proxy Interception: Determine if any reverse proxies are interfering with the transmission of the Access-Control-Allow-Origin header.
• Examine Application Deployment: Verify that the application hosting the API server is deployed correctly, as a 502 Bad Gateway error may indicate deployment issues.

Code Examples

While Option 1 works as-is, the following examples aim to demonstrate different approaches to resolving CORS issues:

Option 2: Custom CORS Middleware

<code class="go">package main

import (
    &quot;log&quot;
    &quot;net/http&quot;

    &quot;github.com/gin-gonic/gin&quot;
)

func main() {
    r := gin.New()
    r.Use(CORS())

    r.POST(&quot;/api/v1/users&quot;, func(ctx *gin.Context) {
        ctx.JSON(http.StatusOK, gin.H{&quot;message&quot;: &quot;OK&quot;})
    })

    if err := r.Run(); err != nil {
        log.Printf(&quot;failed to start server: %v&quot;, err)
    }
}

func CORS() gin.HandlerFunc {
    return func(c *gin.Context) {
        c.Writer.Header().Set(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;)
        c.Writer.Header().Set(&quot;Access-Control-Allow-Credentials&quot;, &quot;true&quot;)
        c.Writer.Header().Set(&quot;Access-Control-Allow-Headers&quot;, &quot;Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With&quot;)
        c.Writer.Header().Set(&quot;Access-Control-Max-Age&quot;, &quot;86400&quot;)
        if c.Request.Method == http.MethodOptions {
            c.AbortWithStatus(http.StatusNoContent)
            return
        }
        c.Next()
    }
}</code>

Option 3: CORS Middleware from External Library

<code class="go">package main

import (
    &quot;log&quot;

    &quot;github.com/gin-contrib/cors&quot;
    &quot;github.com/gin-gonic/gin&quot;
)

func main() {
    router := gin.Default()

    router.Use(cors.New(cors.Config{
        AllowOrigins:     []string{&quot;*&quot;},
        AllowMethods:     []string{&quot;GET&quot;, &quot;POST&quot;, &quot;PUT&quot;, &quot;DELETE&quot;},
        AllowHeaders:     []string{&quot;*&quot;},
        ExposeHeaders:    []string{&quot;Content-Length&quot;},
        AllowCredentials: true,
        MaxAge:           86400,
    }))

    router.GET(&quot;/api/v1/users&quot;, func(c *gin.Context) {
        c.JSON(200, gin.H{&quot;message&quot;: &quot;OK&quot;})
    })

    if err := router.Run(); err != nil {
        log.Printf(&quot;failed to start server: %v&quot;, err)
    }
}</code>

Resolution

In the specific case of the given problem, it was discovered that the issue stemmed from incorrect AWS Load Balancer Target Group settings, specifically misconfiguring the protocol as HTTPS when the certificates were only assigned to Route 53 and ALB. Changing the protocol to HTTP resolved the problem.

The above is the detailed content of Why Is My Subdomain\'s API Server Throwing a CORS Error?. For more information, please follow other related articles on the PHP Chinese website!