Angular 5文件上传遇No 'Access-Control-Allow-Origin'错误求助

嘿，碰到这个跨域问题别慌，我帮你一步步梳理排查！首先明确问题核心：浏览器的预检请求（OPTIONS）没通过，因为后端返回的响应里没有Access-Control-Allow-Origin头，导致你的localhost:4200前端被拒绝访问。既然之前功能正常，大概率是后端配置变动或者前端请求规则变化触发了这个问题。

一、你的Angular服务可能踩的坑 #

先看看你的上传服务有没有这些常见错误：

1. 额外添加了自定义请求头 #

如果最近在上传请求里加了自定义头（比如Authorization、X-User-ID这类），会触发浏览器发送预检OPTIONS请求，而如果后端没配置处理这个OPTIONS请求，就会报错。比如错误的代码可能是这样：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  constructor(private http: HttpClient) {}

  uploadFile(file: File) {
    const formData = new FormData();
    formData.append('file', file);
    // 这里加了自定义头，直接触发预检请求
    return this.http.post(
      'http://52.7.92.114:8080/cms-m2ts/rest/DocumentTagService/uploadFile',
      formData,
      { headers: { 'X-Custom-Header': 'my-value' } }
    );
  }
}

2. 错误设置了Content-Type #

上传文件必须用multipart/form-data类型，如果你手动设置了其他Content-Type（比如application/json），或者覆盖了默认的头，也会触发预检请求，甚至导致后端无法解析文件。

3. 拦截器偷偷加了额外头 #

如果你的Angular项目里有HTTP拦截器（比如统一加token的拦截器），最近有没有修改过？拦截器自动添加的头也会触发预检，而后端没配置允许这些头的话就会报错。

二、修复方案 #

优先：后端配置修复（彻底解决跨域问题） #

跨域本质是后端的权限控制问题，所以最好从后端入手：

• 确保后端的DocumentTagService/uploadFile接口返回CORS响应头：
  • 允许你的前端来源：Access-Control-Allow-Origin: http://localhost:4200（生产环境可以换成正式域名，别用*如果需要带cookie）
  • 允许请求方法：Access-Control-Allow-Methods: POST, OPTIONS
  • 允许必要的请求头：Access-Control-Allow-Headers: Content-Type（如果有自定义头，要把对应的头加进去，比如Authorization）
  • 如果需要携带cookie，还要加Access-Control-Allow-Credentials: true
• 检查后端是否正确处理OPTIONS请求：很多框架（比如Spring Boot）需要配置CORS过滤器，专门处理OPTIONS请求并返回200状态码和上述头。之前正常现在出错，可能是后端部署时CORS配置被覆盖，或者接口路径变更导致CORS规则没匹配到。

前端临时调整（适合本地开发测试） #

1. 移除不必要的自定义头

如果上传不需要额外头，直接删掉，让请求变成简单请求，这样浏览器不会发预检请求，就能绕过错误。修正后的代码：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  constructor(private http: HttpClient) {}

  uploadFile(file: File) {
    const formData = new FormData();
    formData.append('file', file);
    // 去掉自定义头，使用默认的multipart/form-data
    return this.http.post(
      'http://52.7.92.114:8080/cms-m2ts/rest/DocumentTagService/uploadFile',
      formData
    );
  }
}

2. 使用Angular代理（本地开发神器）

配置Angular代理，把前端请求转发到后端，这样浏览器请求的是localhost，就不会有跨域问题：

• 创建proxy.conf.json文件：

{
  "/cms-m2ts": {
    "target": "http://52.7.92.114:8080",
    "secure": false,
    "changeOrigin": true
  }
}

• 在angular.json的projects -> 你的项目名 -> architect -> serve -> options里添加：

"proxyConfig": "proxy.conf.json"

• 修改Angular服务里的请求地址为相对路径：

return this.http.post('/cms-m2ts/rest/DocumentTagService/uploadFile', formData);

三、快速排查步骤 #

1. 用Postman直接请求后端接口，查看响应头里有没有Access-Control-Allow-Origin，如果没有，100%是后端配置问题。
2. 检查最近有没有修改Angular上传服务的代码，或者新增了HTTP拦截器。
3. 确认后端最近有没有部署更新，CORS配置是否被修改或删除。

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