Ajax请求被CORS拦截，本地开发怎么解决跨域问题？

开发者金梅提问于 2026-02-25 15:27:21 阅读 17

前端

我在本地用 http://localhost:3000 调用后端接口 http://localhost:8080/api/data，浏览器控制台报错：CORS policy blocked。后端是Java写的，已经加了 @CrossOrigin 注解，但还是不行，是不是我前端写法有问题？

我用的 fetch 发起请求，代码如下：

fetch('http://localhost:8080/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log(data));

Ajax请求 CORS跨域

我来解答赞 3 收藏

反馈

1 条解答

司马瑞静 Lv1

你这个问题大概率是后端没真正生效，不是前端写法问题。
先确认几个关键点：

第一，@CrossOrigin 注解加在哪个地方？必须加在控制器类或者具体方法上，比如：

@RestController

@RequestMapping("/api")

@CrossOrigin(origins = "http://localhost:3000")

public class DataController {

    @GetMapping("/data")

    public String getData() {

        return "ok";

    }

}

或者方法上：

@GetMapping("/data")

@CrossOrigin(origins = "http://localhost:3000")

public String getData() {

    return "ok";

}

注意 origins 里必须写全协议 + 域名 + 端口，别漏掉 http://，只写 localhost:3000 是不行的。

第二，你这个请求没带 cookie，所以简单 GET 请求理论上不会触发预检（preflight），但如果后端加了自定义 header 或者 Content-Type 是 application/json，其实会触发 OPTIONS 预检请求——而很多人只处理了 GET，没处理 OPTIONS，导致浏览器直接拦了。

你可以在后端加个全局 CORS 配置，一劳永逸，比如写个 WebMvcConfigurer：

@Configuration

public class CorsConfig implements WebMvcConfigurer {

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/api/**")

            .allowedOrigins("http://localhost:3000")

            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")

            .allowedHeaders("*")

            .allowCredentials(true);

    }

}

注意这里允许 OPTIONS 方法很关键，很多开发忘了这一步。

第三，重启服务了吗？Spring 的注解改完不重启是不生效的，有时候热部署也扑街，保险起见还是手动重启下。

最后你那个 fetch 写法没问题，但建议先别加 headers 试一次，确认基础请求能通：

fetch('http://localhost:8080/api/data')

  .then(res => res.text())

  .then(data => console.log(data));

如果这能通，再加 headers 试试，逐步定位。

总之问题大概率是：注解没生效、origins 写错了、或者没处理 OPTIONS 请求。先从这三个方向查，基本能解决。

2026-02-25 16:04