Spring Boot Cors 问题：尝试了所有方法，但 POST 不起作用

Posted 2023-02-25

【中文标题】Spring Boot Cors 问题：尝试了所有方法，但 POST 不起作用

【英文标题】：Spring Boot Cors Issue: Tried everything, but POST doesn't work

【发布时间】：2019-06-22 08:01:05

【问题描述】：

我在 Spring Boot 上遇到了 CORS 问题。获取请求使用 Spring 的 COR 的 Java 配置（使用 WebMvcConfigurer）。 POST 请求不起作用。

我不仅尝试了 Java 配置，还尝试了注解（@CrossOrigin()）和过滤器（排序到 HIGHEST_PRECEDENCE）。注释似乎对我不起作用——即使是获取请求。

我的 CORS 过滤器（复制并粘贴 22kar 的答案）： Spring Boot : CORS Issue

我的 WebMvcConfigurer：

@Bean
public WebMvcConfigurer corsConfigurer() 
    return new WebMvcConfigurer() 
        @Override
        public void addCorsMappings(CorsRegistry registry) 
            registry.addMapping("/greeting-javaconfig").allowedOrigins("http://localhost:3000");
            registry.addMapping("/greeting-posttest").allowedOrigins("http://localhost:3000");
//                .allowedHeaders("Access-Control-Request-Method", "Origin", "Access-Control-Request-Headers")
//                .allowedMethods("POST", "OPTIONS", "HEAD", "GET", "PATCH")
//                .exposedHeaders("Access-Control-Allow-Origin");
        
    ;

我的注释驱动的cors：

//    @CrossOrigin(origins = "http://localhost:3000")
@PostMapping("/greeting-posttest")
public Greeting greetingPostTesting(@RequestBody String content) 
    System.out.println("==== in greeting post ====");
    Greeting newGreeting = new Greeting(counter.incrementAndGet(), content);
    return newGreeting;

发出请求的 JS（来自 react-redux 应用）：

export function apiCall(method, path, data)
  return new Promise((resolve, reject)=>
  return axios.post("http://localhost:8080/greeting-posttest",content: "POSTING!", config).then(res=> 
      console.log("successful");
      console.log(res);
      return resolve(res.data)
  ).catch(err => 
      console.log("caught in apiCall")
      console.log(err);
      return reject(err.response);
  )
)


const config=
  headers: 
  'Origin': 'http://localhost:3000',
  // 'X-Requested-With': 'http://localhost:3000',
  'Access-Control-Request-Method' : 'POST, OPTIONS',
  'Access-Control-Request-Headers': 'access-control-allow-origin'
  

编辑： 浏览器开发工具响应：

Forbidden header name: Origin
Forbidden header name: Access-Control-Request-Method
Forbidden header name: Access-Control-Request-Headers

Axios 响应：

Error:"Network Error"

据我所知，Axios 的响应是，当 Axios 无法提示错误状态代码时，会给出网络错误。

=====================

我的后台：https://github.com/eeasuper/testing123

我的前端：https://github.com/eeasuper/practiceNaverMockingWeb

我在前端的 apicall：https://github.com/eeasuper/practiceNaverMockingWeb/blob/master/src/services/api.js

（前端存储库中的后端文件与本文无关。）

【问题讨论】：

浏览器开发工具控制台中显示的确切错误消息是什么？

在前端 javascript 代码中运行 axios.get 得到的错误消息是相关的。您从 curl 命令获得的错误消息并不真正相关，而且无论如何您也没有显示导致错误的 curl 调用 - 相反，您只是显示了用于发出 OPTIONS 请求的 curl 命令。无论如何，您引用的 curl 错误消息只是表明您在 curl 调用中犯了一些语法错误或 shell-quoting/escaping 错误；这并不表示服务器有问题。

@sideshowbarker 来自 FireFox，我得到了类似“因为 'Same-Origin-Policy' 访问已被阻止。来源：CORS 请求没有成功，”然后它引导我到这个链接：developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… 然后我得到一个从 devtool 记录的错误：“错误：网络错误”，我认为它来自 Axios api。

@sideshowbarker 我编辑了我的帖子以在底部显示浏览器响应。我确实有一个语法错误，但它并没有改变结果，而且它给出了与上面写的不同的响应。

您需要从您的 axios.post 调用中删除整个 config= headers: … 部分。浏览器不允许您从前端 JavaScript 代码设置 Origin 标头。 Origin 标头由浏览器控制并由浏览器设置。 Access-Control-Request-Method 和 Access-Control-Request-Headers 相同。这就是为什么浏览器控制台错误消息会告诉您这些是“禁止的”标头名称——这意味着您被禁止使用这些名称设置请求标头。

【参考方案1】：

使用 Spring Security，我在 post 之后在云上使用了我的 React-Redux 项目。此外，按照github link 底部用户 bvulaj 给出的说明，我的 React 项目可以在 localhost 上运行。我的 React 版本是 16.8.6，我的 Spring 版本是 4.0.0。