javascript - 为什么会出现CORS error？

Question

先登录成功了。

再次调用，就出现了CORS error

在Login页调用这个接口就是正常的，换一个页面调用这个接口就出现了跨域问题。

我把这段代码注释以后就正常了。

Answer 1

Access-Control-Allow-Headers 要包含自定义的请求头,没登录的时候没有 X-Token 这个头，所以正常，登录了之后有个请求头就会报错。

Answer 2

这里面的截图看下

Answer 3

看一下控制台抛出的具体CORS信息。

看OP你的截图框选部分，注释掉就没有出现跨域异常来看。应该是前端部分加了自定义请求头内容，而后端或者代理服务器返回的跨域允许头中并没有允许这个自定义请求头参数。在 Access-Control-Allow-Headers 中添加一下对应的参数名即可。

Answer 4

### 为什么会出现 CORS error？

CORS（跨源资源共享）错误通常发生在当一个资源（例如字体、API 请求等）被来自不同源的网页请求时，而该资源所在的服务器没有正确配置 CORS 策略来允许这种跨源请求。

在你的情况下，尽管域名相同，但 CORS 错误可能由以下几个原因引起：

1. **端口或协议不同**：
   - 即使域名相同，如果请求和资源的端口号不同（例如，一个是 HTTP 80 端口，另一个是 HTTPS 443 端口），或者使用的协议不同（HTTP vs HTTPS），也会被视为跨源请求。

2. **前端代码或配置问题**：
   - 检查是否在不同的页面或组件中使用了不同的请求配置，例如是否错误地设置了请求头中的 `Origin` 或 `Referer`。

3. **服务器配置**：
   - 服务器需要配置适当的 CORS 头来允许来自特定源的请求。即使域名相同，服务器也需要明确允许跨源请求，包括可能的子域名、端口和协议差异。

4. **缓存问题**：
   - 有时候，浏览器缓存或代理缓存可能导致旧的 CORS 策略被错误地应用。尝试清除缓存或使用无痕/隐私模式进行测试。

5. **前端路由或重定向**：
   - 如果你的应用使用了前端路由（如 React Router），并且某些路由或组件的处理方式导致了请求被视为跨源，这也可能是一个原因。

6. **浏览器安全策略**：
   - 某些浏览器安全设置或扩展可能会干扰 CORS 策略的执行。

**解决步骤**：
- **检查请求的完整 URL**：确保请求的完整 URL（包括协议、域名、端口、路径和查询参数）在登录页面和其他页面上是完全一致的。
- **查看服务器 CORS 配置**：检查服务器端的 CORS 配置，确保它允许从你的应用发出的所有相关源的请求。
- **使用开发者工具**：在浏览器中打开开发者工具，查看网络请求的详细信息，特别是请求头和响应头，看看是否有 CORS 相关的错误或警告。
- **清除缓存和 Cookie**：尝试清除浏览器缓存和 Cookie，然后重新加载页面进行测试。