DAY05 - API串接常见问题 - CORS - 概念篇 (2)

昨天,我们知道为什麽会看到CORS的错误讯息,也知道从web server发出request透过浏览器会直接由api server接收,不过所有的request都是这样吗?所有request发到api server不给response这样的机制不会有什麽问题吗?让我们今天探讨一下web server发出的request吧!

简单请求 (Simple request) & 预检请求(Preflight request)

从web server端发起的request其实可以分为两个种类,“简单请求(Simple request)”和“预检请求(Preflight request)"。判断的方式也蛮简单的,只要没有符合以下的条件,就算Preflight Request

成为一个Simple request的条件

  1. metods符合 GET, POST, HEAD 之一
  2. header设定不超出以下范围:
    • Accept
    • Accept-Language
    • Content-Language
    • Content-type的值为三者之一
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

为什麽需要分Simple request & Preflight Request?

不知道大家还记不记得,昨天有提到,在遇到跨来源的请求浏览器会挡掉response,但其实request还是送给server了

听起来很合理,反正我不要给response web端不就收不到资讯了吗,那这样会有什麽问题吗?我们试着想一个情境,如果web这边发出了一个request要删除某个资料,API server收到request,虽然因为跨来源问题在web端收不到response,但request还是收到了,於是就把资料删除了!!这样是不是听起来太不合理了... 於是就把Request分成两种:simple request & preflight request

若所有request都会直接送到server,不该被执行的request也会被送到server执行(eg.删除),为了避免这样的情况,我们需要有simple request & Preflight Request的区分

Simple request & Preflight Request 的差别

Simple request (简单请求)
Simple Request 其实就是前面有提到的流程:
Web server发出request,API Server收到request,浏览器检查是否来源相同或是有特定的http header,若不符合放行条件,则将response阻挡下来,并发出错误讯息通知;若符合条件,则把response传会给前端web。

Preflight request (预检请求)

Preflight request 是一个浏览器在送出真正的request前,会先送出的轻量request(使用OPTIONS方法),只有header没有body。header部分,它包含两个部分的资讯:

  1. HTTP methods (Access-Control-Request-Method)
    表示这个请求的方法,EX. POST, DELETE... 浏览器会自动处理
  2. HTTP headers (Access-Control-Request-Headers)
    这个值放的会是这个请求额外自订的header名称,若有多个则用“,”区隔,浏览器会自动处理将所有不属於simple request的header栏位都列出来。

送出後Preflight request给API Server後,API Server会回应一个Preflight response,此时便会判断上述的两个资讯:methods和headers。若资讯显示通过,则会告诉浏览器是否可以继续往下执行真正的request,并确认真正的request是否有权限可以将response放行回web server,否则便会给予CORS相关的错误讯息。

了解了request的分类後,明天我们就可以看一下浏览器怎麽发放放行通行证让response回到web server罗~~


<<:  企划实现(5)

>>:  [Day 05] - 用Spring Boot 建立Service

DAY 20-数位签章-ECDSA

「你拿的是我的信用卡...」 ECDSA 是运用了椭圆曲线密码学所达成的数位签章演算法, 而比特币区...

食谱搜寻系统demo

Icebear终於完成简易的食谱搜寻系统啦!!今天就献丑一下啦!! 明天Icebear会整理系统缺点...

第34天~还原资料库完.然後~

这篇的上一篇:https://ithelp.ithome.com.tw/articles/10283...

.Net Core Web Api_笔记08_HTTP资源操作模式PATCH

在HTTP请求中 PUT 跟 PATCH 都代表更新 然後他们之间比较主要的差异在於 PUT 用在更...

[Day 10]怎麽每天都像在赶末班电车R(後端篇)

挑战目标: MockNative Camp前端 今天到101取I13 pro替换我的I10,不知道是...