vue項目配置envoy訪問grpc服務跨域報錯問題


問題背景:

前端vue項目通過apigateway訪問grpc服務,之前沒問題,一次提交后頁面突然就報錯了,非常抓狂,下面來看一下問題解決過程

首先直接f12看到了這個錯誤,那一定是跨域錯誤了對吧

查看后端服務跨域配置

 

 也都允許跨域了啊,腫么肥事

繼續看,咦,這里有Cross-Origin Resource Sharing error: PreflightMissingAllowOriginHeader,這是個啥

搜一搜,只看到這個比較接近的 https://blog.csdn.net/sessionsong/article/details/114062002

但是這里面說的是URL長度超限導致部分請求頭沒發過去,好像和我這個還不一樣,我這url很短

 

 

然后再查查,provisional headers are shown,這篇文章總結了幾個出現這種問題的情況 https://zhuanlan.zhihu.com/p/170465909,但是好像和我的都不太相符,心里開始罵娘了

 

 

於是我開始查看我的提交記錄,切換到上一個分支,運行,結果上一個分支確實沒問題

然后在上一個分支上修改grpc項目,發現不是grpc服務的問題

繼續把vue前端項目的修改重新加上,沒問題!!!

接下來就只剩envoy配置的問題了

於是我把這次envoy配置改動一點一點改過去

最后終於找到了問題,欲哭無淚

 

 是根據公司同事寫的envoy配置wiki文檔修改的envoy文件,http_filters下少了一行 -name: envoy.cors

加上之后,就沒問題了

花了將近一天時間,記下來警醒自己,如果能對別人有點幫助,那就更好了

 

------------------------------------------------------------------20210525------------------------------------------------------------------------

貼一下跨域相關的其他節點

 

 主要是cors:

allow_origin_string_match: 允許的請求來源

allow_methods和allow_headers 要把請求涉及到的都加上,瀏覽器post請求會默認加options預檢請求,所以要配options,這個要格外注意

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM