前端用Argon2哈希密码后，跨域请求被拦截怎么办？

Air-志红提问于 2026-02-04 22:21:01 阅读 33

安全

我在前端用JavaScript调用Argon2对用户密码进行哈希处理，然后通过fetch发送到后端，但一直报错“Blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header present”。后端已经设置了CORS头，但问题依旧。尝试过在请求头里加mode: ‘no-cors’，但数据没传过去。我的代码结构是这样的，CSS样式可能影响了请求？

以下是相关的CSS代码：


.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}

input[type="password"] {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

问题出在哪儿？是CORS配置不对，还是Argon2处理影响了请求？

Argon2 认证授权

我来解答赞 2 收藏

反馈

1 条解答

UP主～子轩 Lv1

这个问题和CSS样式没关系，问题出在CORS请求的配置和mode: 'no-cors'的使用方式上。

你提到后端已经设置了CORS头，但浏览器仍然拦截请求，常见的原因有几个：

1. **CORS头设置不完整**
确保后端返回了以下响应头：

Access-Control-Allow-Origin: <前端域名>

   Access-Control-Allow-Credentials: true (如果需要携带凭据)

   Access-Control-Allow-Headers: Content-Type

   Access-Control-Allow-Methods: POST, OPTIONS

特别注意：Access-Control-Allow-Origin不能是*，如果设置了凭据的话。

2. **前端fetch配置问题**
mode: 'no-cors'这个选项会让请求变成“不透明”的，这意味着你无法知道请求是否成功，也无法获取响应数据，所以不能用来正常传输数据。你应该去掉这个选项，并确保请求头中正确设置了Content-Type。例如：

fetch('https://your-api.com/endpoint', {

     method: 'POST',

     headers: {

       'Content-Type': 'application/json',

     },

     body: JSON.stringify({ passwordHash: hash }),

     credentials: 'include' // 如果需要携带cookie

   })

3. **浏览器preflight请求失败**
如果你发送的是非简单请求（比如设置了自定义header），浏览器会先发送一个OPTIONS请求来预检。你需要确认后端处理了OPTIONS请求并返回正确的CORS头。

4. **Argon2处理本身不影响请求**
Argon2生成的是字符串，只要你确保正确地将哈希值序列化成JSON发送，不会影响请求本身。

先检查一下你后端的CORS配置是否包含上面提到的响应头，并去掉前端的mode: 'no-cors'。然后打开浏览器开发者工具，看看Network面板里请求的实际响应头是否包含了CORS相关的字段。如果还是不行，再贴一下后端设置CORS的代码，我们可以继续排查。

2026-02-04 22:22