跨域请求被阻止：请求客户端不是一个安全上下文（has been blocked by CORS policy: The request client is not a secure context）如何解决？

Question

**如何解决跨域请求被阻止：请求客户端不是一个安全上下文的问题？** 在开发中，当尝试从非安全上下文（如通过HTTP而非HTTPS访问）发起跨域请求时，可能会遇到错误提示“has been blocked by CORS policy: The request client is not a secure context”。这是由于现代浏览器的安全策略要求跨域请求必须在安全环境下进行。 要解决此问题，首先确保客户端和服务器端都使用HTTPS协议。如果开发环境中无法启用HTTPS，可以通过以下方法临时解决：1) 使用支持HTTPS的本地开发工具（如ngrok）；2) 在浏览器中禁用安全上下文检查（仅限测试环境，不推荐生产使用）；3) 配置服务器端CORS策略，允许特定来源的非安全请求（需谨慎设置）。 最佳实践是始终使用HTTPS部署应用，从根本上避免非安全上下文问题。

Answer 1

解决跨域请求被阻止：请求客户端不是一个安全上下文的问题

在开发中，当尝试从非安全上下文（如通过HTTP而非HTTPS访问）发起跨域请求时，可能会遇到错误提示“has been blocked by CORS policy: The request client is not a secure context”。以下是逐步分析和解决方案。

1. 问题背景与基础概念

CORS（Cross-Origin Resource Sharing，跨域资源共享）是浏览器的一项安全机制，用于限制网页向不同源（协议、域名、端口任意一项不同即为不同源）发起的请求。现代浏览器要求跨域请求必须在安全环境下进行，即使用HTTPS协议。

如果客户端使用HTTP发起跨域请求，则会触发上述错误。这是因为浏览器认为非HTTPS环境可能存在中间人攻击等安全隐患。

• HTTP是非安全协议，数据可能被窃听或篡改。
• HTTPS通过SSL/TLS加密通信内容，确保数据传输的安全性。

2. 常见问题分析

以下是一些常见的场景及其原因：

场景	原因
本地开发环境	通常使用HTTP访问本地服务，而目标API服务器使用HTTPS。
测试环境	部分测试环境未启用HTTPS，导致跨域请求失败。
生产环境	虽然生产环境一般使用HTTPS，但如果配置不当仍可能导致问题。

3. 解决方案

以下是几种解决方法，根据具体需求选择适合的方案：

1. 启用HTTPS：这是最推荐的解决方案。无论是开发环境还是生产环境，都应尽可能使用HTTPS。
2. 使用ngrok等工具：在本地开发环境中，可以使用ngrok将HTTP服务暴露为HTTPS服务。
3. 禁用浏览器安全上下文检查：仅适用于测试环境，不推荐在生产环境中使用。
4. 配置CORS策略：允许特定来源的非安全请求，但需谨慎设置以避免安全风险。

3.1 启用HTTPS

在生产环境中，始终使用HTTPS是最安全的选择。可以通过购买SSL证书或使用Let's Encrypt提供的免费证书来实现。

sudo certbot --nginx

3.2 使用ngrok

ngrok是一款常用的工具，可以将本地HTTP服务暴露为公共HTTPS服务。

ngrok http 8080

3.3 配置CORS策略

在服务器端，可以通过设置响应头来允许跨域请求。例如，在Node.js中：

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});

4. 流程图说明

以下是解决问题的整体流程图：

graph TD;
            A[问题出现] --> B{是否可以启用HTTPS?};
            B -- 是 --> C[启用HTTPS];
            B -- 否 --> D{是否为开发环境?};
            D -- 是 --> E[使用ngrok];
            D -- 否 --> F{是否需要临时解决方案?};
            F -- 是 --> G[配置CORS策略];
            F -- 否 --> H[无法解决];

以上流程图展示了如何根据实际情况选择合适的解决方案。