5月iOS設備好評榜：iPhone 14僅排第43？
來到新的一月，安兔兔的各個榜單又重新匯總了數據，像安卓陣營的榜單都有著比較大的變動，不過iOS由于設備的更新換代并沒有那么快，所以相對來說變化并不大，特別是iOS好評榜，老款設
一天下午，正認真的上（摸）班（魚）呢，一個前端開發同事找到運維團隊“后端服務是不是有什么異常啊，為什么我的訪問不通呢？”“接口地址拿來~”運維工程師使用本地的postman進行調用。結果是正常返回。“我這調用沒問題啊，你寫的code的問題吧......”一場大戰一觸即發.......
這天可以記為兩位工程師的歷史性時刻——發現了CORS！
跨源資源共享（Cross-Origin Resource Sharing，或通俗地譯為跨域資源共享）是一種基于 HTTP 頭的機制，該機制通過允許服務器標示除了它自己以外的其他源（域、協議或端口），使得瀏覽器允許這些源訪問加載自己的資源。跨源資源共享還通過一種機制來檢查服務器是否會允許要發送的真實請求，該機制通過瀏覽器發起一個到服務器托管的跨源資源的“預檢”請求。在預檢中，瀏覽器發送的頭中標示有 HTTP 方法和真實請求中會用到的頭。
看的有點懵，現在舉個現實中的例子：有一位公司的老板，他有一個秘書，秘書負責在辦公室接通各個客戶的電話后，會詢問是誰從什么地方打來的電話，然后通知老板是否愿意與他們通話。老板比較忙的時候會告訴秘書：“我今天只接受A公司XX人的電話同步的信息”。那么秘書就會按照老板的要求進行同步。但是也有特殊情況：比如B公司老板直接知道老板的電話。也會直接聯系老板
從現實生活到軟件工程訪問，我們做一個對應：
訪問的逐步順序如下：
我們啟動一個后端和前端來模擬問題：
package main import ( "encoding/json" "errors" "fmt" "github.com/go-chi/chi/v5" "net/http" ) var books = [] string { "指環王" , "霍比特人" , "精靈寶鉆" } type Book struct {標題字符串 `json:"title"` } func main () { err := runServer() if err != nil { iferrors.Is( err , http.ErrServerClosed ) { fmt.Println( "服務器關閉" ) } else { fmt.Println( "服務器失敗" , err) } } } func runServer () error { httpRouter := chi.NewRouter() httpRouter.Route( "/api/ v1" , func (r chi.Router) { r.Get( "/books" , getAllBooks) r.Post( "/books" , addBook) r.Delete( "/books" , deleteAllBooks) }) server := &http .Server{Addr: "localhost:8888" , Handler: httpRouter} return server.ListenAndServe() } func getAllBooks (w http.ResponseWriter, req *http.Request) { respBody, err := json.Marshal(books) if err != nil { w.WriteHeader(http.StatusInternalServerError) return } w.Header().Set( "Content-Type" , "application/json" ) w.WriteHeader(http.StatusOK) w.Write(respBody) } func addBook (w http.ResponseWriter, req *http.Request) { var book Book err := json.NewDecoder(req.Body).Decode(&book) if err != nil { w.WriteHeader(http.StatusBadRequest) return } books = append (books, book.Title) w.WriteHeader(http.StatusCreated) } func deleteAllBooks (w http.ResponseWriter, req *http.Request) { books = [] string {} w.WriteHeader(http.StatusNoContent) }運行這段代碼，服務器將運行為http://localhost:8888
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Books</title> <link rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script></head><body><div class="container p-3"> <button type="button" class="btn btn-primary" id="getBooks">Get books</button> <button type="button" class="btn btn-danger" id="deleteAllBooks">Delete all books</button> <br> <br> <form> <div class="mb-3"> <label for="inputBookTitle" class="form-label">Book title</label> <input type="text" class="form-control" id="inputBookTitle" aria-describedby="emailHelp"> </div> <button type="submit" class="btn btn-primary">Add</button> </form></div><script> function getBooks () { fetch('http://localhost:8888/api/v1/books') .then(response => response.json()) .then(data => { const booksList = document.querySelector('.books-list') if (booksList) { booksList.remove() } const ul = document.createElement('ul') ul.classList.add('books-list') data.forEach(book => { const li = document.createElement('li') li.innerText = book ul.appendChild(li) }) document.body.appendChild(ul) }) } function deleteAllBooks () { fetch('http://localhost:8888/api/v1/books', { method: 'DELETE' }) .then(response => { if (response.status === 204) { getBooks() } else { const div = document.createElement('div') div.innerText = 'Something went wrong' document.body.appendChild(div) } }) } const getBooksButton = document.getElementById('getBooks') const deleteAllBooksButton = document.getElementById('deleteAllBooks') const input = document.querySelector('input') const form = document.querySelector('form') getBooksButton.addEventListener('click', () => getBooks()) deleteAllBooksButton.addEventListener('click', () => deleteAllBooks()) form.addEventListener('submit', (event) => { event.preventDefault() const title = input.value fetch('http://localhost:8888/api/v1/books', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title }) }) .then(response => { if (response.status === 201) { input.value = '' getBooks() } else { const div = document.createElement('div') div.innerText = 'Something wend wrong' document.body.appendChild(div) } }) })</script></body></html>一個Go 服務(與index.html放在一個文件夾下)：
package mainimport ( "errors" "fmt" "github.com/go-chi/chi/v5" "net/http")func main() { err := runServer() if err != nil { if errors.Is(err, http.ErrServerClosed) { fmt.Println("client server shutdown") } else { fmt.Println("client server failed", err) } }}func runServer() error { httpRouter := chi.NewRouter() httpRouter.Get("/", serveIndex) server := &http.Server{Addr: "localhost:3333", Handler: httpRouter} return server.ListenAndServe()}func serveIndex(w http.ResponseWriter, req *http.Request) { http.ServeFile(w, req, "./index.html")}運行這段代碼，前端html將運行為http://localhost:3333
使用瀏覽器訪問，得到如下頁面，打開F12調試，在文本框中輸入書名，點擊Add：
得到了與文章開始時類似的報錯。
您可能已經發現，我們的后端代碼根本沒有提及 CORS。確實如此，到目前為止我們還沒有實現任何 CORS 配置。但這對于瀏覽器來說并不重要：它無論如何都會嘗試發出預檢請求。（就像秘書一定要征求老板的意見，不會擅自決定）
如果我們單擊405這個報錯，會展開一些詳細信息，我們可以看到瀏覽器嘗試向與添加圖書端點相同的路徑發出 OPTIONS 請求，并收到響應405 Method Not Allowed，這是有道理的，因為我們還沒有定義我們后端的 OPTIONS 端點。
前端應用程序保持不變，但對于后端，我們需要進行一些更改：
引入一個新函數來啟用 CORS：
func enableCors (w http.ResponseWriter) { // 指定允許哪些域訪問此 API w.Header().Set( "Access-Control-Allow-Origin" , "http://localhost:3333" ) //指定允許哪些方法訪問此 API w.Header().Set( "Access-Control-Allow-Methods" , "GET, POST, DELETE" ) // 指定允許哪些標頭訪問此 API w.Header( ).Set( "Access-Control-Allow-Headers" , "Accept, Content-Type" ) // 指定瀏覽器可以緩存預檢請求結果的時間（以秒為單位） w.Header().Set( “訪問控制最大時間”，strconv.Itoa（ 60 * 60 * 2））}在現有端點旁邊引入一個 OPTIONS 端點以及一個處理它的函數：
... httpRouter.Route( "/api/v1" , func (r chi.Router) { r.Options( "/books" , corsOptions) r.Get( "/books" , getAllBooks) r.Post( "/ books" , addBook) r.Delete( "/books" , deleteAllBooks) }) ... func corsOptions (w http.ResponseWriter, req *http.Request) { enableCors(w) w.WriteHeader(http.StatusOK) }添加enableCors對其他端點現有函數的調用，例如：
func getAllBooks (w http.ResponseWriter, req *http.Request) {respBody, err := json.Marshal(books) if err != nil { w.WriteHeader(http.StatusInternalServerError) return }enableCors(w)w.Header( ).Set( "Content-Type" , "application/json" )w.WriteHeader(http.StatusOK)w.Write(respBody)}最后的后端代碼如下：
package mainimport ( "encoding/json" "errors" "fmt" "github.com/go-chi/chi/v5" "net/http" "strconv")var books = []string{"The Lord of the Rings", "The Hobbit", "The Silmarillion"}type Book struct { Title string `json:"title"`}func main() { err := runServer() if err != nil { if errors.Is(err, http.ErrServerClosed) { fmt.Println("server shutdown") } else { fmt.Println("server failed", err) } }}func runServer() error { httpRouter := chi.NewRouter() httpRouter.Route("/api/v1", func(r chi.Router) { r.Options("/books", corsOptions) r.Get("/books", getAllBooks) r.Post("/books", addBook) r.Delete("/books", deleteAllBooks) }) server := &http.Server{Addr: "localhost:8888", Handler: httpRouter} return server.ListenAndServe()}func corsOptions(w http.ResponseWriter, req *http.Request) { enableCors(w) w.WriteHeader(http.StatusOK)}func getAllBooks(w http.ResponseWriter, req *http.Request) { respBody, err := json.Marshal(books) if err != nil { w.WriteHeader(http.StatusInternalServerError) return } enableCors(w) w.Header().Set("Content-Type", "application/json") w.WriteHeader(http.StatusOK) w.Write(respBody)}func addBook(w http.ResponseWriter, req *http.Request) { var book Book err := json.NewDecoder(req.Body).Decode(&book) if err != nil { w.WriteHeader(http.StatusBadRequest) return } books = append(books, book.Title) enableCors(w) w.WriteHeader(http.StatusCreated)}func deleteAllBooks(w http.ResponseWriter, req *http.Request) { books = []string{} enableCors(w) w.WriteHeader(http.StatusNoContent)}func enableCors(w http.ResponseWriter) { // specifies which domains are allowed to access this API w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3333") // specifies which methods are allowed to access this API (GET is allowed by default) w.Header().Set("Access-Control-Allow-Methods", "POST, DELETE") // specifies which headers are allowed to access this API w.Header().Set("Access-Control-Allow-Headers", "Content-Type") // specifies for how long the browser can cache the results of a preflight request (in seconds) w.Header().Set("Access-Control-Max-Age", strconv.Itoa(60*60*2))}重新啟動前端和后端，重新嘗試訪問會發現問題解決了~
其中重要的部分是Response headers
如果嘗試改變后端配置。允許訪問的地址改為http://localhost:33333：
此時再去訪問則發現：
此時就是后端的配置導致的。當人你也可以更改其他的配置做一些嘗試。
我們到這就理解了CORS是一種允許當前域（domain）的資源（比如http://localhost:8888）被其他域（http://localhost:3333）的腳本請求訪問的機制，通常由于同域安全策略（the same-origin security policy）瀏覽器會禁止這種跨域請求。當瀏覽器發出PUT請求，OPTION（預檢）請求返回Access-Control-Allow-Origin:http://localhost:3333,Access-Control-Allow-Methods:’PUT’，服務器同意指定域的PUT請求，瀏覽器收到并繼續發出真正的PUT請求，服務器響應并再次返回Access-Control-Allow-Origin:http://localhost:3333,允許瀏覽器的腳本執行服務器返回的數據。
希望能對您有幫助！
參考：https://itnext.io/understanding-cors-4157bf640e11
本文鏈接：http://www.www897cc.com/showinfo-26-70437-0.html老板與秘書的故事理解CORS（跨域），真的超級簡單
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Go 語言實戰：構建強大的延遲任務隊列
下一篇： 預定義宏的神秘面紗：編程世界的隱藏利器
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號