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

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

安全

我在前端用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 认证授权

我来解答赞 6 收藏

反馈

2 条解答

司翰 Lv1

CORS 和 Argon2、CSS 都没关系，问题出在后端没正确响应预检请求（OPTIONS），后端必须对 OPTIONS 请求也返回 Access-Control-Allow-Origin 等头，比如 Node.js Express 这样写：

app.options('*', (req, res) => {

  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')

  res.status(204).end()

})

再把前端 fetch 的 mode: 'no-cors' 删掉，正常发就行，搞定。

2026-02-26 10:04

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