CORS 是什麼？

-

什麼時候會用到 CORS

CORS：跨來源資源共用（Cross-Origin Resource Sharing）

舉例：瀏覽器連線到 http://localhost:3000 的伺服器，伺服器回傳的 HTML 檔案中，在 javascript 裡用 XMLHttpRequest 請求 https://example.com 的資源。

只要通訊協定、網域、和通訊埠三者中有一個不同，就屬於跨來源資源請求。 所以 http://localhost:3000 請求 https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css 上的資源，就屬於跨來源資源請求。

為了保護資訊安全，跨來源資源請求是受到限制的。若想完成跨來源資源請求，需要遵守 CORS 的規範，不然就會失敗。

CORS 的規範是什麼

簡單請求、非簡單請求

跨來源資源請求，分為簡單請求，和非簡單請求。

定義：符合底下所有條件的就是簡單請求，不符合的就是非簡單請求

  1. HTTP 方法是 GET、HEAD 或 POST

  2. 自訂的請求頭只能是 Accept、Accept-Language、Content-Language 或 Content-Type（此項的值只能是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain）

  3. If the request is made using an XMLHttpRequest object, no event listeners are registered on the object returned by the XMLHttpRequest.upload property used in the request; that is, given an XMLHttpRequest instance xhr, no code has called xhr.upload.addEventListener() to add an event listener to monitor the upload.（字面上的意思似乎是，如果是用 XMLHttpRequest 物件發出請求，而且請求時有用到 upload 這個，property 那麼，不能在 upload 回傳的物件上面註冊監聽器。）

  4. No ReadableStream object is used in the request. （目前還沒弄懂這是什麼）

簡單請求

瀏覽器送出請求時，要在請求頭加上 Origin。Origin 中包括了通訊協定、網域、和通訊埠。

伺服器收到請求時，會檢查 Origin 的值，決定是否要允許這個請求。若允許的話，會在響應頭加上 Access-Control-Allow-Origin。

瀏覽器收到回應後，會檢查 Origin 是否有在 Access-Control-Allow-Origin 的名單上。有的話才會請求成功。

非簡單請求

跟簡單請求相比，非簡單請求在一開始多了預檢請求的步驟。預檢請求（preflight request），是用來打聽伺服器是否允許這樣的跨來源資源請求。允許的話，瀏覽器才會送出請求

瀏覽器送出預檢請求：

  • 使用 http OPTIONS 方法，
  • 請求頭則是 Access-Control-Request-Method（瀏覽器要用什麼非簡單的 http 方法） 和 Access-Control-Request-Headers（瀏覽器要用什麼非簡單的請求頭）

伺服器回應預檢請求：響應頭裡面有這兩個東西：

  • Access-Control-Allow-Methods：伺服器允許什麼 http 方法
  • Access-Control-Allow-Headers：伺服器允許什麼非簡單的請求頭

參考資料

HTTP請求頭

CORS

易混淆的觀念：CORS 、CSRF、XSS

Comments

Post a Comment

Popular posts from this blog

shop_platform - 建立多對多關聯：Association Object

-
根據 SQLAlchemy 的 Basic Relationship Patterns ，建立多對多關聯有兩種方式： join table 上只有外鍵欄位：使用 association table join table 上除了外鍵，還有其他欄位：使用 association object association object 不同欄位間的關係： class Association (Base):     __tablename__ = 'association'     left_id = Column(ForeignKey(' left.id '), primary_key=True)     right_id = Column(ForeignKey(' right.id '), primary_key=True)     extra_data = Column(String(50))     child = relationship(" Child ", back_populates=" parents ")     parent = relationship(" Parent ", back_populates=" children ") class Parent (Base):     __tablename__ = ' left '     id = Column(Integer, primary_key=True)     children = relationship(" Association ", back_populates=" parent ") class Child (Base):     __tablename__ = ' right '     id = Column(Integer, primary_key=True)     parents = relationship(" Association ", back_populates=" c
Read more

[計算機概論] SR Flip-Flop

-
Image
SR Flip-Flop 又稱為 SR Latch 定義（根據于天立教授計算機概論單元 1） 有兩個 input，分別稱為 set（簡稱 S） 和 reset（簡稱 R） output 計算方式 兩個 input 都是 0：output 維持之前的狀態（這個真是挺有趣的，會導致同樣的 input 有不同的 output。以前在哲學所念形式邏輯時，從來沒遇過這種設定） 兩個 input 都是 1：output undefined S 負責把 output 設成 1 R 負責把 output 設成 0 用途：儲存一個 bit 的值 實作方式至少有兩種（圖片來自于天立教授計算機概論單元 1 的 投影片 ）： 參考資料 台大開放式課程 于天立教授的計算機概論 Sequential Logic Circuits ：不知道是我有所誤會，還是有不同的定義習慣，這篇文章裡，是設定「兩個 input 都是 0：output undefined」、「兩個 input 都是 1：output 維持之前的狀態」，跟于天立教授講的剛好相反 CS-計概04：閘與電路 ：這裡的設定也是「兩個 input 都是 0：output undefined」、「兩個 input 都是 1：output 維持之前的狀態」
Read more

git 指令

-
remote 的 origin 上有 branch A，local 沒有 branch A。想建立一個跟 origin/A 進度相同的 local branch A git switch -c A origin/A 遠端分枝名稱寫錯了，想改名字。先刪除 remote 的 origin 上的 A 分支，然後再用正確名字 push 一次 git push origin --delete A 參考： How To Rename a Local and Remote Git Branch How to delete remote branches in Git 把本地的 A 分枝 push 到遠端 origin 上的 B 分枝 git push origin A:B 複製其他分枝的 commit 到當前所在的分枝 git cherry-pick <commit hash code> // 只複製一個 commit git cherry-pick <commit hash code 1>..<commit hash code 2> // 複製多個連續的 commit（不包含 hash code 1 的那個 commit） 參考： 你那招很厲害，我不要一整套，可以只要一招嗎？git cherry-pick Git Cherry Pick 的後遺症 暫存目前未 commit 的程式碼 git stash 取出暫存的程式碼 git stash pop 強制蓋掉 remote 的分枝（非常確定這個分支沒有其他人在 commit 時才用，以免把別人的 commit 蓋掉） git push --force-with-lease 參考： Git Force vs Force with Lease
Read more