php小編小新今天為大家介紹的是一個常見的網頁開發問題:無法從主網域存取子網域,出現了「Access-Control-Allow-Origin」錯誤。這個問題在前端開發中經常遇到,尤其在跨域請求時較為常見。它通常會導致請求被瀏覽器攔截,無法正常取得所需的資料。在本文中,我們將詳細解釋這個錯誤的原因和解決方法,幫助大家快速解決這個問題,確保專案的正常運作。
問題內容
版本
go 1.17 github.com/gin-contrib/cors v1.3.1 github.com/gin-gonic/gin v1.7.7
問題
我在我的子網域中運行 gin rest api 伺服器。
react應用程式放置在主網域中,使用get方法和post方法存取api伺服器,但出現cors策略錯誤access to xmlhttprequest at 'https://<subdomain>.<domain>.xxx/api/ v1/users' from origin 'https:// /<domain>.xxx' 已被cors 策略阻止:對預檢請求的回應未透過存取控制檢查:請求的資源.</domain></domain></subdomain>
上不存在「access- control-allow-origin」標頭。
在網路搜尋中,我發現了同樣的問題和一些解決方案,但它們對我的情況不起作用。
程式碼
所有這些程式都出現相同的錯誤。
案例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) } }
案例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) } }
案例3
回應標頭中缺少 access-control-allow-origin。 · 問題 #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) } }
從航廈起飛
> 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 id="Bad-Gateway">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 -->
已解決
這是由 aws_lb_target_group
設定引起的。
儘管我僅向 route 53 和 alb 提供了 acm 證書,但我在目標群組中設定了協定 https。
我用 http 替換了 https,現在它可以工作了。
解決方法
診斷此類問題的第一步是直接檢查 chrome devtools 中的預檢請求。
註解:
- 檢查
disable cache
以防預檢回應被快取。 - 尋找類型為
preflight
的請求。
下一步是將預檢請求複製為curl
命令(右鍵單擊請求,在上下文選單中選擇copy
->copy as curl )並直接使用curl
工具測試請求(記得修改指令新增-i
選項用於列印回應標頭)。
您似乎在生產環境中遇到了該問題,瀏覽器和您的服務之間的反向代理可能預設阻止 access-control-allow-origin
標頭。嘗試將預檢請求直接發送到您的服務,看看是否有任何不同。
更新(提供預檢回應後):
事實證明,這根本不是 cors 問題。請求失敗,狀態代碼 502 bad gateway
。應用程式未正確部署。
順便說一句,我已經測試了案例 1 並且它有效:
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
以上是無法從主網域存取子網域:沒有'Access-Control-Allow-Origin”的詳細內容。更多資訊請關注PHP中文網其他相關文章!

Golangisidealforbuildingscalablesystemsduetoitsefficiencyandconcurrency,whilePythonexcelsinquickscriptinganddataanalysisduetoitssimplicityandvastecosystem.Golang'sdesignencouragesclean,readablecodeanditsgoroutinesenableefficientconcurrentoperations,t

Golang在並發性上優於C ,而C 在原始速度上優於Golang。 1)Golang通過goroutine和channel實現高效並發,適合處理大量並發任務。 2)C 通過編譯器優化和標準庫,提供接近硬件的高性能,適合需要極致優化的應用。

選擇Golang的原因包括:1)高並發性能,2)靜態類型系統,3)垃圾回收機制,4)豐富的標準庫和生態系統,這些特性使其成為開發高效、可靠軟件的理想選擇。

Golang適合快速開發和並發場景,C 適用於需要極致性能和低級控制的場景。 1)Golang通過垃圾回收和並發機制提升性能,適合高並發Web服務開發。 2)C 通過手動內存管理和編譯器優化達到極致性能,適用於嵌入式系統開發。

Golang在編譯時間和並發處理上表現更好,而C 在運行速度和內存管理上更具優勢。 1.Golang編譯速度快,適合快速開發。 2.C 運行速度快,適合性能關鍵應用。 3.Golang並發處理簡單高效,適用於並發編程。 4.C 手動內存管理提供更高性能,但增加開發複雜度。

Golang在Web服務和系統編程中的應用主要體現在其簡潔、高效和並發性上。 1)在Web服務中,Golang通過強大的HTTP庫和並發處理能力,支持創建高性能的Web應用和API。 2)在系統編程中,Golang利用接近硬件的特性和對C語言的兼容性,適用於操作系統開發和嵌入式系統。

Golang和C 在性能對比中各有優劣:1.Golang適合高並發和快速開發,但垃圾回收可能影響性能;2.C 提供更高性能和硬件控制,但開發複雜度高。選擇時需綜合考慮項目需求和團隊技能。

Golang适合高性能和并发编程场景,Python适合快速开发和数据处理。1.Golang强调简洁和高效,适用于后端服务和微服务。2.Python以简洁语法和丰富库著称,适用于数据科学和机器学习。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)