解密跨域访问利器：allowedOriginPatterns和allowedOrigins大揭秘

揭秘跨域访问的奥秘：allowedOrigins 与 allowedOriginPatterns

理解跨域访问

在构建现代 Web 应用程序时，跨域访问成为开发人员面临的常见难题。跨域访问是指来自不同域或端口的网页尝试获取或修改其他网页的资源。为了解决这个问题，浏览器引入了跨源资源共享 (CORS) 机制，允许不同来源的网页相互请求资源。

CORS 的 HTTP 头

CORS 通过设置 HTTP 头来控制哪些源可以访问资源，以及允许哪些 HTTP 方法和头。其中有两个属性用于指定允许跨域访问的源：allowedOrigins 和 allowedOriginPatterns。

allowedOrigins：精确匹配

allowedOrigins 属性使用字符串匹配，这意味着它只能指定具体的跨域来源，不能使用通配符。因此，它适用于需要严格控制跨域访问源的场景。例如，如果您希望仅允许特定网站或域访问您的 API，可以使用 allowedOrigins 属性来指定允许的源。

代码示例：

app.use(cors({
  allowedOrigins: ['https://example.com']
}));

在这个示例中，我们仅允许来自 https://example.com 的跨域请求访问我们的 API。

allowedOriginPatterns：灵活匹配

allowedOriginPatterns 属性使用 Ant 风格的路径匹配规则，可以匹配多个来源。这意味着它适用于需要灵活控制跨域访问源的场景。例如，如果您希望允许来自特定域的所有子域访问您的 API，可以使用 allowedOriginPatterns 属性来指定允许的源模式。

代码示例：

app.use(cors({
  allowedOriginPatterns: ['https://*.example.com']
}));

在这个示例中，我们允许来自以 开头的以 .example.com 结尾的任意二级域名的跨域请求访问我们的 API。

选择合适的属性

选择使用 allowedOriginPatterns 还是 allowedOrigins 取决于您的具体需求。如果您需要严格控制跨域访问源，请选择 allowedOrigins。如果您需要灵活控制跨域访问源，请选择 allowedOriginPatterns。

常见问题解答

1. 为什么要使用 CORS？

CORS 是浏览器机制，允许不同来源的网页相互请求资源，解决跨域访问的安全问题。

2. allowedOrigins 和 allowedOriginPatterns 的区别是什么？

allowedOrigins 使用字符串匹配，只能指定具体的源；allowedOriginPatterns 使用 Ant 风格的路径匹配，可以匹配多个源。

3. 如何使用 allowedOriginPatterns 匹配子域？

使用通配符 ，如：allowedOriginPatterns: ['https://.example.com']

4. 是否可以在 allowedOrigins 中使用通配符？

不可以，allowedOrigins 只能匹配具体的源。

5. 如何配置允许多个跨域源？

使用 allowedOriginPatterns 并将其设置为一个包含多个模式的数组，如：allowedOriginPatterns: ['https://example.com', 'https://example.org']