Access-Control-Allow-Methods: OPTIONS & CORS All In One

Access-Control-Allow-Methods: OPTIONS & CORS All In One

Access-Control-Allow-Methods: OPTIONS

Comma-delimited list of the allowed HTTP request methods.

Access-Control-Allow-Methods: POST, GET, OPTIONS

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS
https://fetch.spec.whatwg.org/#http-access-control-allow-methods

Preflighted Requests

预检请求

Unlike simple requests, for "preflighted" requests the browser first sends an HTTP request using the OPTIONS method to the resource on the other origin, in order to determine if the actual request is safe to send.
Such cross-origin requests are preflighted since they may have implications for user data.

与简单请求不同，对于“预检”请求，浏览器首先使用 OPTIONS 方法向其他源上的资源发送 HTTP 请求，以确定实际请求是否可以安全发送。
此类跨源请求会进行预检，因为它们可能会对用户数据产生影响。

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://bar.other/doc");
xhr.setRequestHeader("X-PINGOTHER", "pingpong");
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.onreadystatechange = handler;
xhr.send("<person><name>Arun</name></person>");

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

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

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

const xhr = new XMLHttpRequest();
const url = "https://bar.other/resources/public-data/";

xhr.open("GET", url);
xhr.onreadystatechange = someHandler;
xhr.send();

Some requests don't trigger a CORS preflight. Those are called simple requests from the obsolete CORS spec, though the Fetch spec (which now defines CORS) doesn't use that term.

某些请求不会触发 CORS 预检。这些被称为来自过时 CORS 规范的简单请求，尽管 Fetch 规范（现在定义了 CORS）不使用该术语。

PSOT + application/json ❌

PSOT + application/x-www-form-urlencoded ✅
PSOT + multipart/form-data ✅
text/plain

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

CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

https://stackoverflow.com/questions/20478312/default-value-for-access-control-allow-methods
https://www.html5rocks.com/en/tutorials/cors/

https://www.w3.org/TR/cors/#preflight-request

Fetch API

async function logMovies() {
  const response = await fetch("http://example.com/movies.json");
  const movies = await response.json();
  console.log(movies);
}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

demos

// old
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';

function callOtherDomain(){
  if(invocation) {
      invocation.open('POST', url, true);
      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
      invocation.setRequestHeader('Content-Type', 'application/xml');
      invocation.onreadystatechange = handler;
      invocation.send(body);
    }
}

// ...

// Fetch API

Note: As described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.

credentials

fetch POST cookies & credentials

fetch(`http://localhost:3000/api/post`, {
    body: JSON.stringify({key: "value"}),
    // cache: "no-cache",
    headers: {
        "Content-Type": "application/json",
    },
    method: "POST",
    // cookies
    credentials: 'include',
    // credentials: 'same-origin',
    // credentials: 'omit',
    // mode: "no-cors",
    mode: "cors",
})
.then(res => console.log(`res =`, res))
.catch(err => console.error(`error =`, err));

1. same-origin
   Send user credentials (cookies, basic http auth, etc..) if the URL is on the same origin as the calling script.
   This is the default value.

2. include
Always send user credentials (cookies, basic http auth, etc..), even for cross-origin calls.

3. omit
Never send or receive cookies.

https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

refs

https://github.com/xgqfrms/learning/issues/24

---

---

©xgqfrms 2012-2025

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---