CORS & OPTIONS & preflight request

CORS & OPTIONS

preflight request

1. CORS 原理

CORS跨域的原理实际上是浏览器与服务器通过一些HTTP协议头来做一些约定和限制

2. OPTIONS 应用场景

https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

preflighted requests & simple requests

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

https://dev.to/effingkay/cors-preflighted-requests--options-method-3024

demos

1. GET & application/json === OPTION

const getData = (url = ``) => {
    // Default options are marked with *
    return fetch(url, {
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, same-origin, *omit
        headers: {
            // "user-agent": "Mozilla/4.0 MDN Example",
            "Content-Type": "application/json",
            // "Content-Type": "text/plain",
            // "Content-Type": "text/plain",
        },
        method: "GET", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // *client, no-referrer
    })
    .then(response => response.json()) // parses response to JSON
    .then(json => {
        // json
        console.log(`json =`, JSON.stringify(json, null, 4));
        return json;
    })
    .catch(err => console.error(`error =`, err));
};

getData(`https://cdn.xgqfrms.xyz/json/data.json`);

2. GET & text/plain !== OPTION

const getData = (url = ``) => {
    // Default options are marked with *
    return fetch(url, {
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, same-origin, *omit
        headers: {
            // "user-agent": "Mozilla/4.0 MDN Example",
            // "Content-Type": "application/json",
            "Content-Type": "text/plain",
            // "Content-Type": "text/plain",
        },
        method: "GET", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // *client, no-referrer
    })
    .then(response => response.json()) // parses response to JSON
    .then(json => {
        // json
        console.log(`json =`, JSON.stringify(json, null, 4));
        return json;
    })
    .catch(err => console.error(`error =`, err));
};

getData(`https://cdn.xgqfrms.xyz/json/data.json`);

3. POST & application/json === OPTION

const postData = (url = ``, data = {}) => {
    // Default options are marked with *
    return fetch(url, {
        body: JSON.stringify(data), // must match "Content-Type" header
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, same-origin, *omit
        headers: {
            // "user-agent": "Mozilla/4.0 MDN Example",
            "Content-Type": "application/json",
            // "Content-Type": "text/plain",
            // "Content-Type": "text/plain",
        },
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // *client, no-referrer
    })
    .then(response => response.json()) // parses response to JSON
    .then(json => {
        // json
        console.log(`json =`, JSON.stringify(json, null, 4));
        return json;
    })
    .catch(err => console.error(`error =`, err));
};

postData(`https://cdn.xgqfrms.xyz/json/data.json`, {});

4. POST & application/x-www-form-urlencoded !== OPTION

const postData = (url = ``, data = {}) => {
    // Default options are marked with *
    return fetch(url, {
        body: data, // must match "Content-Type" header
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, same-origin, *omit
        headers: {
            // "user-agent": "Mozilla/4.0 MDN Example",
            // "Content-Type": "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
            // "Content-Type": "text/plain",
        },
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // *client, no-referrer
    })
    .then(response => response.json()) // parses response to JSON
    .then(json => {
        // json
        console.log(`json =`, JSON.stringify(json, null, 4));
        return json;
    })
    .catch(err => console.error(`error =`, err));
};

postData(`https://cdn.xgqfrms.xyz/json/data.json`, `key=value`);

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---