Tidak dapat mengakses subdomain dari domain utama: Tiada 'Access-Control-Allow-Origin'

Apa yang akan diperkenalkan oleh editor PHP Xiaoxin kepada anda hari ini ialah masalah pembangunan rangkaian biasa: subdomain tidak boleh diakses daripada domain utama dan ralat "Access-Control-Allow-Origin" berlaku. Masalah ini sering dihadapi dalam pembangunan bahagian hadapan, terutamanya apabila membuat permintaan merentas domain. Ia sering menyebabkan permintaan dipintas oleh penyemak imbas, menghalang data yang diperlukan daripada diperoleh dengan betul. Dalam artikel ini, kami akan menerangkan punca dan penyelesaian ralat ini secara terperinci untuk membantu anda menyelesaikan masalah ini dengan cepat dan memastikan operasi normal projek.

Kandungan soalan

Versi

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

Soalan

Saya menjalankan pelayan gin rest api dalam subdomain saya.

Aplikasi react diletakkan dalam domain utama dan menggunakan kaedah dapatkan dan kaedah pos untuk mengakses pelayan api, tetapi saya mendapat ralat dasar cors access to xmlhttprequest at 'https://<subdomain>.<domain>.xxx/api/v1/users' from origin 'https:// /<domain>.xxx' 已被 cors 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源. Pengepala "access-control-allow-origin" tidak wujud padanya.

Dalam carian web saya menemui masalah yang sama dan beberapa penyelesaian tetapi ia tidak berkesan untuk kes saya.

Kod

Ralat yang sama berlaku dengan semua program ini.

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

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

Kes 3

access-control-allow-origin tiada daripada pengepala respons. · Isu #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)
    }
}

Berlepas dari 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 -->

Selesai

Ini disebabkan oleh tetapan aws_lb_target_group.

Walaupun saya hanya memberikan sijil acm untuk laluan 53 dan alb, saya menetapkan protokol https dalam kumpulan sasaran.

Saya menggantikan https dengan http dan kini ia berfungsi.

Penyelesaian

Langkah pertama dalam mendiagnosis jenis isu ini ialah menyemak permintaan pra-penerbangan terus dalam chrome devtools.

Nota:

1. Semak disable cache sekiranya tindak balas sebelum penerbangan dicache.
2. Cari permintaan jenis preflight.

Langkah seterusnya ialah menyalin permintaan prapenerbangan sebagai curl 命令（右键单击请求，在上下文菜单中选择 copy->copy as curl）并直接使用 curl 工具测试请求（记得修改命令添加-i pilihan untuk mencetak pengepala respons).

Nampaknya anda menghadapi isu ini dalam persekitaran pengeluaran, proksi terbalik antara penyemak imbas dan perkhidmatan anda mungkin menyekat pengepala access-control-allow-origin secara lalai. Cuba hantar permintaan pra-penerbangan terus ke perkhidmatan anda dan lihat jika itu membuat sebarang perbezaan.

Kemas kini (selepas memberikan respons sebelum penerbangan):

Ternyata, ini bukan isu kors sama sekali. Permintaan gagal dengan kod status 502 bad gateway. Aplikasi tidak digunakan dengan betul.

BTW, saya telah menguji kes 1 dan ia berkesan:

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

Atas ialah kandungan terperinci Tidak dapat mengakses subdomain dari domain utama: Tiada 'Access-Control-Allow-Origin'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!