zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    CORS & OPTIONS

    preflight request

    1. CORS 原理

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

    1. 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`);
    
    
    1. 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`);
    
    
    1. 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`, {});
    
    
    1. 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`);
    
    

    Flag Counter

    ©xgqfrms 2012-2020

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


  • 相关阅读:
    参加过的面试题目总结
    小论文实验讨论——不同的分类算法
    【设计模式】行为型07备忘录模式(Memento Pattern)
    【设计模式】行为型06命令模式(Command Pattern)
    【设计模式】行为型05责任链模式(Chain of responsibility Pattern)
    【设计模式】行为型04迭代器模式(Iterator Pattern)
    【设计模式】行为型03观察者模式(Observer Pattern)
    【设计模式】行为型02模板方法模式(Template Method Patten)
    【JVM】02垃圾回收机制
    【死磕线程】线程同步机制_java多线程之线程锁
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/11938830.html
Copyright © 2011-2022 走看看