Von der Hauptdomäne aus kann nicht auf die Subdomäne zugegriffen werden: Kein „Access-Control-Allow-Origin“

Was Ihnen der PHP-Editor Xiaoxin heute vorstellen wird, ist ein häufiges Problem bei der Netzwerkentwicklung: Auf die Subdomain kann von der Hauptdomäne aus nicht zugegriffen werden, und es tritt der Fehler „Access-Control-Allow-Origin“ auf. Dieses Problem tritt häufig bei der Frontend-Entwicklung auf, insbesondere bei domänenübergreifenden Anfragen. Dies führt häufig dazu, dass die Anfrage vom Browser abgefangen wird und die erforderlichen Daten nicht ordnungsgemäß abgerufen werden können. In diesem Artikel erläutern wir die Ursache und Lösung dieses Fehlers im Detail, um Ihnen dabei zu helfen, dieses Problem schnell zu lösen und den normalen Betrieb des Projekts sicherzustellen.

Frageninhalt

Version

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

Frage

Ich verwende den Gin Rest API-Server in meiner Subdomain.

Die React-Anwendung wird in der Hauptdomäne platziert und verwendet die Get-Methode und die Post-Methode, um auf den API-Server zuzugreifen. Ich erhalte jedoch einen Cors-Richtlinienfehler. access to xmlhttprequest at 'https://<subdomain>.<domain>.xxx/api/v1/users' from origin 'https:// /<domain>.xxx' 已被 cors 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源.</domain></domain></subdomain> Der Header „access-control-allow-origin“ ist darauf nicht vorhanden.

Bei der Websuche habe ich das gleiche Problem und einige Lösungen gefunden, aber sie haben in meinem Fall nicht funktioniert.

Code

Bei all diesen Programmen tritt der gleiche Fehler auf.

Fall 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)
    }
}

Fall 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)
    }
}

Fall 3

access-control-allow-origin fehlt im Antwortheader. · Ausgabe Nr. 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)
    }
}

Abheben vom 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 -->

Gelöst

Dies wird durch die aws_lb_target_group-Einstellung verursacht.

Obwohl ich das ACM-Zertifikat nur für Route 53 und Alb bereitgestellt habe, habe ich in der Zielgruppe das Protokoll https eingestellt.

Ich habe https durch http ersetzt und jetzt funktioniert es.

Problemumgehung

Der erste Schritt bei der Diagnose dieser Art von Problem besteht darin, die Preflight-Anfragen direkt in Chrome Devtools zu überprüfen.

Notizen:

1. Überprüfen disable cache, ob die Preflight-Antwort zwischengespeichert ist.
2. Suchen Sie nach Anfragen des Typs preflight.

Der nächste Schritt besteht darin, die Preflight-Anfrage als curl 命令（右键单击请求，在上下文菜单中选择 copy->copy as curl）并直接使用 curl 工具测试请求（记得修改命令添加-iOption zum Drucken von Antwortheadern zu kopieren.

Anscheinend tritt dieses Problem in einer Produktionsumgebung auf. Der Reverse-Proxy zwischen dem Browser und Ihrem Dienst blockiert möglicherweise standardmäßig den access-control-allow-origin-Header. Versuchen Sie, die Preflight-Anfrage direkt an Ihren Dienst zu senden und prüfen Sie, ob das einen Unterschied macht.

Update (nach Bereitstellung einer Preflight-Antwort):

Es stellte sich heraus, dass dies überhaupt kein Cors-Problem ist. Die Anfrage ist mit dem Statuscode 502 bad gateway fehlgeschlagen. Die Anwendung wurde nicht korrekt bereitgestellt.

Übrigens habe ich Fall 1 getestet und es funktioniert:

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

Das obige ist der detaillierte Inhalt vonVon der Hauptdomäne aus kann nicht auf die Subdomäne zugegriffen werden: Kein „Access-Control-Allow-Origin“. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!