跨域共享
CORS
,全称Cross-Origin Resource Sharing,是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the same-origin security policy),浏览器会禁止跨域请求。
安装
pnpm add @aomex/cors
使用
// src/web.ts
import { WebApp } from '@aomex/core';
import { cors } from '@aomex/cors';
const app = new WebApp({
mount: [cors()],
});
参数
origin
类型: string | Function
默认:request.headers.origin
设置报头 Access-Control-Allow-Origin,表示该响应的资源是否被允许与给定的来源(origin)共享。对于不包含凭据的请求,也可以设为星号(*),表示同意任意跨源请求
allowMethods
类型:string[] | string
默认:GET,HEAD,PUT,POST,DELETE,PATCH
设置报头 Access-Control-Allow-Methods,表示客户端所要访问的资源允许使用的方法或方法列表。
exposeHeaders
类型:string[]
| string
响应报头 Access-Control-Expose-Headers 允许服务器指示那些响应报头可以暴露给浏览器中运行的脚本。
默认情况下,只暴露安全列表的响应报头:
- Cache-Control
- Content-Language
- Content-Length
- Content-Type
- Expires
- Last-Modified
- Pragma
也支持自定义:
cors({
exposeHeaders: ['Content-Encoding', 'Kuma-Revision'],
});
更多详细信息请参考MDN
allowHeaders
类型:string[] | string
设置报头 Access-Control-Allow-Headers
maxAge
类型:number
| string
设置报头 Access-Control-Max-Age,表示 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 提供的信息可以被缓存的最长时间(秒)。
如果值为-1
,表示禁用缓存,则每次请求前都需要使用 OPTIONS 预检请求
credentials
类型: boolean | Function
默认:false
设置报头 Access-Control-Allow-Credentials,Credentials可以代表 cookies、authorization headers 或 TLS client certificates,需要与客户端 XMLHttpRequest.withCredentials 或 Fetch API 的 credentials 选项结合使用
// XHR
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://aomex.js.org', true);
xhr.withCredentials = true;
xhr.send(null);
// Fetch
fetch('https://aomex.js.org', {
credentials: 'include',
});
// Axios
axios.create({
uri: 'https://aomex.js.org',
withCredentials: true,
});
secureContext
类型:boolean
默认:false
响应头部增加 Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 这两个个报头
privateNetworkAccess
类型:boolean
默认:false
处理请求报头 Access-Control-Request-Private-Network 并返回报头 Access-Control-Allow-Private-Network。
想了解专有网络的内容请点击这里