Angular 4项目在FireFox与Safari中无法正常运行问题咨询

看起来你遇到了Firefox下的CORS跨域限制问题——这事儿挺常见的，Chrome对CORS规则的检查会宽松一点，但Firefox对响应头的要求更较真，直接导致你的登录功能没法正常工作。先给你拆解下问题和解决方案：

问题核心 #

错误提示里的关键信息是：Cross-Origin Request Blocked: ... (Reason: missing token ‘content-type’ in CORS header ‘Access...，意思是后端返回的CORS响应头里，没有明确允许Content-Type这个请求头，Firefox不认这个跨域请求，直接拦截了。

另外提一句：Angular is running in the development mode...这个提示是正常的，和登录失效没关系，只是告诉你当前是开发环境，部署时可以调用enableProdMode()切换生产模式而已。

具体解决方案 #

1. 后端配置CORS响应头 #

你需要让后端服务在跨域请求的响应中，添加允许Content-Type的头信息：

• 必须包含Access-Control-Allow-Headers: Content-Type，如果你的登录请求还有其他自定义头（比如Authorization），也要一起加进去，用逗号分隔。
• 同时确保Access-Control-Allow-Origin设置正确，比如允许你的Angular前端域名（默认是http://localhost:4200），生产环境别用*（不安全）。

举几个常见后端的配置例子：

• Node.js/Express：用cors中间件配置

  const cors = require('cors');
  app.use(cors({
    origin: 'http://localhost:4200', // 你的前端地址
    allowedHeaders: ['Content-Type', 'Authorization'] // 明确包含Content-Type
  }));
  

• Java Spring Boot：在控制器或配置类添加注解

  @CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "Content-Type")
  @RestController
  public class LoginController {
      // 你的登录接口逻辑
  }
  

2. 确认前端请求的Content-Type #

Angular的HttpClient在发送JSON格式的请求时，会自动设置Content-Type: application/json，这刚好是Firefox要求必须被CORS头允许的字段，所以只要后端配置了上面的头，这个问题就解决了。

3. 测试验证 #

修改后端配置后重启服务，然后：

• 清空Firefox的缓存（快捷键Ctrl+Shift+Del），避免旧的响应头缓存干扰。
• 打开开发者工具（F12）→ 网络面板，发起登录请求，查看响应头里是否包含Access-Control-Allow-Headers: Content-Type，如果有，说明配置生效了。

内容的提问来源于stack exchange，提问作者bhautikmodi8