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));
-
same-origin
Send user credentials (cookies
,basic http auth
, etc..) if the URL is on the same origin as the calling script.
This is thedefault value
. -
include
Always
send user credentials (cookies
,basic http auth
, etc..), even for cross-origin calls. -
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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/9993892.html
未经授权禁止转载,违者必究!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步