localhost前端axios发POST请求被CORS策略拦截该如何解决？

问题本质 #

CORS是浏览器的同源安全策略限制，默认禁止不同源（协议、域名、端口任意一个不同）的站点发起跨域请求，当前本地localhost:3000和目标服务端https://abc...不属于同源，且服务端没有返回允许跨域的响应头，因此请求被拦截。

可选解决方案 #

方案1：服务端配置CORS响应头（最推荐，生产环境唯一可行方案） #

核心是在服务端接口返回的响应头中添加允许跨域的相关字段，不同后端框架配置示例如下：

• Node.js（Express框架）配置：

const cors = require('cors');
// 全局配置，也可以单独给指定接口配置
app.use(cors({
  // 开发环境可临时设置为*，生产环境建议填写实际允许的前端域名
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  // 跨域请求需要带Cookie时开启，否则可省略
  credentials: true
}))

• Java（SpringBoot框架）配置：
  单接口配置：直接在Controller类或接口方法上添加注解@CrossOrigin(origins = "http://localhost:3000")
  全局配置示例：

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

• 注意事项：服务端必须正确处理OPTIONS预检请求，浏览器在发送FormData上传这类非简单请求前，会先发送OPTIONS请求校验跨域权限，如果OPTIONS请求返回异常或没有正确的CORS响应头，后续实际请求会直接被拦截。

方案2：前端本地开发代理（仅开发环境可用） #

如果暂时无法修改服务端配置，开发阶段可以通过前端脚手架自带的代理功能转发请求，规避浏览器跨域限制：

• Create React App项目：在package.json中新增配置项

"proxy": "https://abc..."

修改axios请求地址为相对路径，比如原请求地址为https://abc.../upload，改为：

let result = await axios({
  url: "/upload",
  method: "POST",
  data: formdata,
});

• Vite项目：在vite.config.js中新增代理配置

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://abc...',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

修改axios请求地址为/api/接口路径格式即可，代理会自动转发请求到目标服务端。

方案3：浏览器禁用安全策略（仅临时测试用，不推荐） #

Windows系统右键Chrome快捷方式，选择「属性」-「目标」，在原有路径后添加参数 --disable-web-security --user-data-dir="C:\ChromeDevTest"，使用该快捷方式打开的浏览器会跳过CORS校验，仅适合临时调试使用。

前端代码注意事项 #

你当前的axios提交FormData的代码不需要手动设置headers: {'Content-Type': 'multipart/form-data'}，axios会自动识别FormData对象并添加正确的请求头（包含boundary参数），手动设置反而会丢失boundary导致请求格式错误。

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