理解并解决“Strict-Origin-When-Cross-Origin”跨源请求错误

The "Strict-Origin-When-Cross-Origin" CORS 错误是开发人员在尝试访问不同源的资源时常见到的一个问题。这个错误会阻止你的应用程序请求，并导致其无法正常运行。在本指南中，我们将解释这个错误的原因、它是如何工作的，以及如何有效地解决它。

"Strict-Origin-When-Cross-Origin" 策略是一种浏览器安全机制，用于管理跨源请求和响应时如何处理 Referer 头。它是现代浏览器安全的一部分，旨在保护用户在跨源请求时的数据安全。

同源请求：

• 请求中包含了完整的 Referer URL，例如：
• 示例：从 https://example.com/page1 到 [https://example.com/page2](https://example.com/page2.)。

跨源请求：

• 只有来源 URL 被包含在 Referer 标头中（https://example.com）。
• 示例：从 https://example.com 到 [https://anotherdomain.com](https://anotherdomain.com.) 的请求。

HTTPS 到 HTTP 的跨域请求：

• Referer 头部完全被省略了。

错误通常出现在以下情况：

1. 您的 web 应用尝试发起跨源请求，但目标服务器不允许这么做。
2. 服务器的 CORS 策略 配置不当或过于严格；
3. 浏览器对 Referer 标头执行更严格的规定，从而阻止某些类型的请求。

在你打开的浏览器的控制台中，错误可能像这样显示：

    从 'https://api.example.com/data' 访问被 'https://yourdomain.com' 的 CORS 策略阻止了：预检请求的响应结果未通过访问控制检查：'Access-Control-Allow-Origin' 标头的值 'null' 不匹配提供的 origin。

更新服务器的响应头，包含正确的 Access-Control-Allow-Origin 设置。这会告诉浏览器哪些来源可以访问该资源。

对于所有原点, ：

访问控制允许来源: * (Access-Control-Allow-Origin: *)

• 对于具体来源：

    Access-Control-Allow-Origin: https://yourdomain.com （允许源）

• 对于动态来源头：使用服务器端逻辑来检查 Origin 头，并相应地设置 Access-Control-Allow-Origin。

预检请求是浏览器通过发送HTTP OPTIONS请求来检查服务器权限，以确保其具备访问资源所需的权限。确保你的服务器正确响应这些请求。

响应头（Response Headers）示例：

    Access-Control-Allow-Origin: https://yourdomain.com  # 允许源访问控制
    Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS  # 允许方法访问控制
    Access-Control-Allow-Headers: Content-Type, Authorization  # 允许头访问控制

这些头用于设置跨域资源共享的访问控制。

确保客户端和服务器两端都使用 HTTPS。现代浏览器通常对混合内容请求（比如 HTTPS 到 HTTP）实施更严格的 CORS 策略。CORS 策略

在开发过程中，你可以暂时禁用CORS策略或调整浏览器设置。请小心使用这些方法，因为这些操作可能会带来安全风险。

• 如何使用代理：设置代理服务器用来将请求转发给目标API。这可以保持所有请求在同一源。
• Node.js 示例代码：

（请注意，我在此部分后添加了一个换行符以提高可读性。）

const { 创建代理中间件 } = require('http-proxy-middleware');
app.use('/api', 创建代理中间件({
    目标: 'https://api.example.com',
    changeOrigin: true,
}));
// 此代码使用了http-proxy-middleware模块来创建一个代理中间件，用于将/api路径的请求代理到'https://api.example.com'，并且会改变请求的来源。

• 浏览器扩展程序：使用诸如 CORS Unblock Chrome 扩展程序之类的工具进行测试，。

确保您的前端代码包含适当的头部信息以支持跨源请求。例如：

使用 Fetch API （获取 API）：

    fetch('https://api.example.com/data', {  
      method: 'GET',  
      headers: {  
        'Content-Type': 'application/json',  
      },  
      credentials: 'include', // 用于携带 cookies 或令牌  
    })  
    .then(response => response.json())  
    .catch(error => console.error('跨域请求错误:', error));

对于本地测试，启动浏览器时使用较为宽松的CORS设置。例如，如果你使用Chrome浏览器，可以这样设置：

chrome.exe --disable-web-security --user-data-dir="C:\chrome-dev"

警告：千万不要在生产环境中使用这种方法。