Angular4文件上传至数据库时出现跨域访问控制错误求助

看起来你在Angular4文件上传时碰到了经典的**CORS（跨域资源共享）**问题，浏览器的同源策略会阻止前端应用（http://localhost:4200）访问不同端口/域名的后端接口，除非后端明确允许这个源的请求。你的错误提示里提到预检请求（OPTIONS）返回403且缺少Access-Control-Allow-Origin头，这说明后端没有正确配置CORS规则，同时前端的请求写法也可能需要调整。

下面是具体的解决方案：

1. 后端配置CORS（核心解决步骤） #

CORS问题的核心解决点在后端，需要让后端明确允许http://localhost:4200的请求，并且正确处理预检OPTIONS请求。以下是几种常见后端技术的配置示例：

Node.js/Express #

可以用cors中间件快速配置：

const cors = require('cors');
const app = express();

// 允许localhost:4200的请求
app.use(cors({
  origin: 'http://localhost:4200',
  credentials: true, // 如果请求需要携带cookie，开启这个
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'OPTIONS', 'PUT', 'DELETE']
}));

如果不想用中间件，也可以手动设置响应头：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // 处理预检请求，直接返回200
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

Java Spring Boot #

可以用全局CORS配置：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("GET", "POST", "OPTIONS", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

如果用了Spring Security，还要确保它允许OPTIONS请求通过。

Python Flask #

借助flask-cors扩展配置：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 仅允许localhost:4200访问/upload接口
CORS(app, resources={r"/upload": {"origins": "http://localhost:4200"}})

2. 调整Angular前端的文件上传请求 #

你的当前代码用JSON对象传递文件，这不符合文件上传的规范，应该用FormData来构建请求体，同时不要手动设置multipart/form-data的Content-Type（浏览器会自动添加正确的分隔符）：

upload(fichier: File) {
  const formData = new FormData();
  formData.append('file', fichier); // 这里的键名要和后端接收的参数名保持一致

  return this._http.post(this._urlbase + 'upload', formData, {
    // 不需要手动设置Content-Type，浏览器会自动处理
    // headers: new HttpHeaders().set('Content-Type', 'multipart/form-data')
  });
}

3. 额外排查点 #

• 确认后端的/upload接口没有拦截OPTIONS请求，很多后端框架会默认拦截这类预检请求，需要确保它返回200状态码和正确的CORS头。
• 如果后端有防火墙或安全策略，检查是否阻止了来自localhost:4200的请求。
• 生产环境不要硬编码localhost:4200，可以配置允许的源列表，或者用通配符*（但带凭证的请求不推荐用*）。

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