是ㄧ種瀏覽器上的安全機制,用來防止惡意網站在瀏覽器上執行 JS 或是防止其他惡意攻擊者發送 request 直接拿到個人隱私的資料。
網址必須要是相同 protocol、host、port。
以 https://sheng8787.tw 為例
What is CORS ?
是一種使用額外 HTTP Header 令目前瀏覽網站取得存取其他來源(網域)伺服器特定資源權限的機制,當使用者請求一個不是和目前網站相同來源的請求時,會建立一個跨來源 HTTP 請求(cross-origin HTTP request)。
常見的錯誤是在 AJAX 向後端發送 request 的時候,那應該要怎麼解決呢?
大部分情形下,CORS 都不是前端的問題,純前端是解決不了的。
最直接有效的辦法就是請後端加上CORS header,這個 header 的名稱叫做 Access-Control-Allow-Origin,內容就是你想要放行的 origin,例如說:Access-Control-Allow-Origin: http://localhost:3000,
直白說就是從這個網域發送的 request 是可以信任的。
瀏覽器提供 Fetch API 來發送 request 和接收 response
範例1
fetch() 有兩個參數,第一個是 url 第二個是可傳入一個物件
fetch("http://example.com/movies.json")
.then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(myJson);
});
範例2
function postData(url, data) {
return fetch(url, {
body: JSON.stringify(data),
cache: "no-cache",
credentials: "same-origin",
headers: {
"content-type": "application/json",
},
method: "POST",
mode: "cors",
}).then((response) => response.json()); // 輸出成 json
}