Impossible d'accéder au sous-domaine à partir du domaine principal : non 'Access-Control-Allow-Origin'

Ce que l'éditeur PHP Xiaoxin va vous présenter aujourd'hui est un problème courant de développement de réseau : le sous-domaine n'est pas accessible à partir du domaine principal et l'erreur « Access-Control-Allow-Origin » se produit. Ce problème est souvent rencontré dans le développement front-end, notamment lors des requêtes cross-domaines. Il en résulte souvent que la requête est interceptée par le navigateur, empêchant ainsi l'obtention correcte des données requises. Dans cet article, nous expliquerons en détail la cause et la solution de cette erreur pour vous aider à résoudre ce problème rapidement et assurer le fonctionnement normal du projet.

Contenu des questions

Version

go 1.17
github.com/gin-contrib/cors v1.3.1
github.com/gin-gonic/gin v1.7.7

Question

J'utilise le serveur API gin rest dans mon sous-domaine.

L'application React est placée dans le domaine principal et utilise la méthode get et la méthode post pour accéder au serveur API, mais j'obtiens une erreur de politique cors access to xmlhttprequest at 'https://<subdomain>.<domain>.xxx/api/v1/users' from origin 'https:// /<domain>.xxx' 已被 cors 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源. L'en-tête "access-control-allow-origin" n'existe pas dessus.

Lors d'une recherche sur le Web, j'ai trouvé le même problème et quelques solutions, mais elles n'ont pas fonctionné dans mon cas.

Code

La même erreur se produit avec tous ces programmes.

Cas 1

package gateway

import (
    "log"

    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)

func runserver() {
    r := gin.default()
    r.use(cors.default())
    api := r.group("/api")
    v1 := api.group("/v1")
    userrouters(v1)
    err := r.run()
    if err != nil {
        log.printf("failed to run gateway: %v", err)
    }
}

Cas 2

package gateway

import (
    "log"
    "time"

    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)

func runserver() {
    r := gin.default()
    r.use(cors.new(cors.config{
        alloworigins:     []string{"*"},
        allowmethods:     []string{"get", "post", "put", "delete"},
        allowheaders:     []string{"content-type"},
        allowcredentials: false,
        maxage:           12 * time.hour,
    }))
    api := r.group("/api")
    v1 := api.group("/v1")
    userrouters(v1)
    err := r.run()
    if err != nil {
        log.printf("failed to run gateway: %v", err)
    }
}

Cas 3

access-control-allow-origin est absent de l'en-tête de réponse. · Numéro 29 · gin-contrib/cors

package gateway

import (
    "log"

    "github.com/gin-gonic/gin"
)

func cors() gin.handlerfunc {
    return func(c *gin.context) {
        c.writer.header().set("access-control-allow-origin", "*")
        c.writer.header().set("access-control-allow-credentials", "true")
        c.writer.header().set("access-control-allow-headers", "content-type, content-length, accept-encoding, x-csrf-token, authorization, accept, origin, cache-control, x-requested-with")
        c.writer.header().set("access-control-allow-methods", "post, options, get, put, delete")

        if c.request.method == "options" {
            c.abortwithstatus(204)
            return
        }

        c.next()
    }
}

func runserver() {
    r := gin.default()
    r.use(cors())
    api := r.group("/api")
    v1 := api.group("/v1")
    userrouters(v1)
    err := r.run()
    if err != nil {
        log.printf("failed to run gateway: %v", err)
    }
}

Décollage du terminal

> curl 'https://alb.skhole.club/api/v1/authz' \
  -X 'OPTIONS' \
  -H 'authority: alb.skhole.club' \
  -H 'accept: */*' \
  -H 'accept-language: ja,en-US;q=0.9,en;q=0.8' \
  -H 'access-control-request-headers: content-type' \
  -H 'access-control-request-method: POST' \
  -H 'cache-control: no-cache' \
  -H 'origin: https://skhole.club' \
  -H 'pragma: no-cache' \
  -H 'referer: https://skhole.club/' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: same-site' \
  -H 'user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36' \
  --compressed -i
HTTP/2 502 
server: awselb/2.0
date: Wed, 05 Apr 2023 04:04:13 GMT
content-type: text/html
content-length: 524

<html>
<head><title>502 Bad Gateway</title></head>
<body>
<center><h1>502 Bad Gateway</h1></center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->

Résolu

Cela est dû au paramètre aws_lb_target_group.

Bien que j'aie uniquement fourni le certificat acm à la route 53 et alb, j'ai défini le protocole https dans le groupe cible.

J'ai remplacé https par http et maintenant ça marche.

Solution de contournement

La première étape pour diagnostiquer ce type de problème consiste à vérifier les demandes de contrôle en amont directement dans les outils de développement Chrome.

Remarques :

1. Vérifiez disable cache au cas où la réponse de contrôle en amont serait mise en cache.
2. Trouver des requêtes de type preflight.

L'étape suivante consiste à copier la demande de contrôle en amont en tant qu'option curl 命令（右键单击请求，在上下文菜单中选择 copy->copy as curl）并直接使用 curl 工具测试请求（记得修改命令添加-i pour imprimer les en-têtes de réponse).

Vous semblez rencontrer ce problème dans un environnement de production, où le proxy inverse entre le navigateur et votre service peut bloquer l'en-tête access-control-allow-origin par défaut. Essayez d'envoyer la demande de contrôle en amont directement à votre service et voyez si cela fait une différence.

Mise à jour (après avoir fourni une réponse de contrôle en amont) :

Il s'avère que ce n'est pas du tout un problème de cors. La demande a échoué avec le code d'état 502 bad gateway. L'application n'a pas été déployée correctement.

BTW, j'ai testé le cas 1 et ça marche :

package main

import (
    "log"
    "net/http/httputil"

    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)

func main() {
    r := gin.default()

    r.use(cors.default())
    api := r.group("/api")
    v1 := api.group("/v1")
    v1.post("users", func(ctx *gin.context) {
        buf, err := httputil.dumprequest(ctx.request, true)
        if err != nil {
            log.printf("failed to dump request: %v", err)
            return
        }

        log.printf("%s", buf)
    })
    err := r.run()
    if err != nil {
        log.printf("failed to run gateway: %v", err)
    }
    r.run()
}

$ curl 'http://localhost:8080/api/v1/users' \
  -X 'OPTIONS' \
  -H 'Accept: */*' \
  -H 'Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.6' \
  -H 'Access-Control-Request-Headers: content-type' \
  -H 'Access-Control-Request-Method: POST' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Origin: http://127.0.0.1:5501' \
  -H 'Pragma: no-cache' \
  -H 'Referer: http://127.0.0.1:5501/' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: cross-site' \
  -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36' \
  --compressed -i
HTTP/1.1 204 No Content
Access-Control-Allow-Headers: Origin,Content-Length,Content-Type
Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 43200
Date: Wed, 05 Apr 2023 03:50:06 GMT

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!