Brian的雜記
  • Introduction
  • Brian's 雜記
    • My Awesome API
    • FB 大頭貼
    • 硬體雜記
    • PHP
    • project
      • 模擬器
      • WAMP
    • WinMerge
    • 雜記
      • LINQ
      • 方法
      • Grid View
      • namespace
      • global
      • 物件導向
      • Excel
      • VS2017
      • single sign on
      • Master
      • Https
      • 憑證
      • 略過憑證不符
      • NLog
      • 團隊開發
      • .NET Core
      • 共用網路上的芳鄰
      • 爬蟲
      • NPOI
      • RSS
      • 多執行緒
      • 記憶體回收
      • 密碼學
        • BCrypt
        • AES
      • 主機環境建置
      • Session
      • Error
      • IIS 相關
      • 無障礙相關
      • 介面
        • 影像地圖
      • telnet
        • smtp
      • nslookup
      • 協助客戶解決問題
      • 驗證欄位
      • 網站管理
      • 工具整理
    • 正規表示法
    • 影像處理
    • IntelliJ Idea
    • 觀念
      • Clean Code
        • 命名
        • 函式
        • 註解
        • 編排
        • 物件及資料結構
        • 錯誤處理
        • 邊界
        • 單元測試
        • 類別
      • Java 程式風格
      • Design Pattern
        • 單例模式
      • 同步
      • 畫圖
        • ER-Model
        • 類別圖
        • Use Case
        • 有限狀態機
      • 資料 API 文件 分析
      • CORS & SSL
      • 利用DISC幫助溝通
      • OAS
    • 檔案上傳
      • FileStore
      • App Engine
      • Google Storage
    • OAuth vs Open ID
    • MIME
    • 虛擬桌面
    • 待看資料
    • Selenium
    • CDN
    • HTTP
    • 編碼
    • 2nd-ML100Days
      • jupyter
    • 微服務
      • 設計
        • 1 ~ 5
        • 6
        • 7
        • 8
        • 9
    • Gradle
    • Maven
    • Error
    • 批次檔 BAT
    • Kurento
    • WebSocket & WebRTC
  • 需求面能力
    • User Story
  • Google Cloud Platform
    • Compute Engine
  • Python
    • 基本語法
    • Pandas
    • 套件
    • Matplotlib
    • Encoder
    • jupyter
  • Java
    • Java
      • File
      • Exception
      • 物件導向觀念
      • 加密
      • HTTP
      • 集合
      • Stream()
      • Web
      • ResultSet
      • JDK6
      • JDK8
    • 讀取、複寫MP3 Tag
    • Log4j2
    • Servlet
      • 容器
    • JSP
    • JBOSS
    • JWT
    • PreparedStatement
    • Error
    • Spring
      • Spring Boot
        • @Value
        • Build
      • RequestParameter
      • Error
      • Autowired
      • JPA
      • FeignClient
      • WebSocket
      • thymeleaf
      • Security
      • Test
      • Scheduled
      • Redirect
    • IntelliJ
  • Linux
    • Linux
    • Shell Script
    • Cygwin(在Windows執行Linux指令)
  • 前端
    • HTML
      • Link
    • CSS
      • Position
      • padding color
      • display
    • JS
      • jQuery
        • Select2
      • fancybox
      • ES6
      • 效能
      • GoogleMap API
        • Marker
        • InfoWindow
      • 事件
      • CKEditor
      • TGOS
      • JSON
      • QRcode
      • 核心概念
        • 物件 變數 型別
          • number
          • String
          • boolean
          • null & undefined
          • Symbol
        • JS 物件概念
        • 深入理解JS 函式物件
        • 更多ES2015/ES6 全新語言特性
      • Promise
    • 效果應用
  • 資料庫
    • 注意事項
    • MariaDB
    • MySQL
      • inner join 和 join
      • 字串比對
      • 倒數資料
    • SQL
      • DDL 資料定義語言
      • DML 資料操縱語言
      • DCL 資料控制語言
      • TCL 交易控制語言
      • T-SQL
      • CTE
      • JOIN
    • Oracle
    • MSSQL 操作
      • 新增使用者
      • SQL 指令
      • Sequence
    • 差異比較
    • MyBatis
    • Workbench 操作
    • SQL Injection
  • 版本控制
    • Gitlab
      • sign up
      • sign in
      • add project
      • add members
    • SourceGit
      • install
    • SmartGit
      • install
      • operate
      • git 操作雜記
    • TortoiseGit
    • Git
    • TFS
    • SVN
  • Test
    • 軟體測試原則
    • 演算法
    • XMind
      • install
    • Jenkins
      • 建置
    • HTTPie
    • Postman
    • 測試驅動開發
    • 撰寫測試的觀念
    • 測試框架
    • IoC & DI
    • 隔絕相依性的方式
    • JUnit
    • NUnit
    • 習慣
    • 虛設常式
  • Angular
    • hello world
    • ng-options
    • ES6
    • Build & Conponect
    • HttpClient
    • 部署
  • ASP.NET Web Form
    • Chapter 2
      • 2-1
        • 小東西
    • 略過請求驗證
  • Go
Powered by GitBook
On this page
  • CORS, Cross-Origin Resource Sharing 跨源資源共享
  • 同源政策
  • CORS
  • Preflight Request
  • 簡單請求
  • JSONP

Was this helpful?

  1. Brian's 雜記
  2. 觀念

CORS & SSL

Previous資料 API 文件 分析Next利用DISC幫助溝通

Last updated 5 years ago

Was this helpful?

參考資料:()

參考資料:()

CORS, Cross-Origin Resource Sharing 跨源資源共享

當 Protocol、Domain、Port 有其中一個不同,即為跨域。

CORS 的作用,主要是用來改善網路應用程式,開發人員要求 瀏覽器 必須允許跨域請求

同源政策

因為瀏覽器基於安全性考量,有一個東西叫做 同源政策 Same-origin policy。意思是如果呼叫的 API 網站跟自己不同源(也就是跨域),雖然 Request 還是會照發,但是 Response 會被擋下來。

注意:Request 還是有發出去,而瀏覽器也確實有收到 Response,但瀏覽器因為同源政策,不把結果回傳給你

相對於同源政策,當然也就有另外一種規範:如果你想在不同的 origin 之間傳輸資料的話,你應該怎麼做。 這種規範,就叫做 CORS。

CORS

這套規範跟你說,如果想開啟跨來源 HTTP Request 的話,Server 必須在 Response 的 Header 加上 Access-Control-Allow-Origin 這個屬性。

當瀏覽器收到 Response 的時候,會先檢查這個屬性,如果這個屬性內包含 現在這個發起 Request 的 Origin 的話,就會允許通過,讓程式可以順利地接收到 Response。

除了 Access-Control-Allow-Origin 之外,還有 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 可以去定義。

Preflight Request

簡單請求

定義:沒有加入自定義 Header、HTTP Method : GET

而這個定義之外的,就不是簡單請求。

而當我們加入了自定義的 Header,在發出真正的 Request 之前,就會先發送一個 Preflight Request (預檢請求),因為非簡單請求 可能會帶有一些使用者的資料,因此會先透過預檢請求,去跟 Server 確認我們是否能做這樣的動作。如果這個預檢請求沒有通過的話,則真正的 Request 就不會發送。

為什麼要有這樣的設計呢? 因為我們上面講到的,瀏覽器的 CORS 機制,會實際去呼叫 API,但是會擋住 Resonse,讓使用者收不到。但如果去呼叫什麼新增、修改、刪除的指令,讓 Server 實際去執行了,也真的把資料刪除了,那就糟糕了。所以會發一個 OPTIONS 先去跟 Server 確認能不能執行,如果沒有通過,就不會真的發送 Request。

JSONP

全名叫做:JSON with Padding

使可以用 GET 的方式,去取得回應,並利用 callback 這個參數,當作回傳的函式名稱,將回應的 javascript 物件,傳到函數裡。

https://kknews.cc/zh-tw/tech/e8apaan.html
https://blog.techbridge.cc/2017/05/20/api-ajax-cors-and-jsonp/