React项目更新房间价格遇CORS错误及请求对象显示异常求助

一、搞定CORS策略拦截问题 #

这个错误核心是后端服务未返回Access-Control-Allow-Origin响应头，分两种方式解决：

后端配置（正式环境首选） #

• Spring Boot后端：添加CORS配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/admin/**")
                .allowedOrigins("http://localhost:3000") // 填写你的React项目运行地址
                .allowedMethods("PUT", "GET", "POST", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

• Node.js/Express后端：使用cors中间件

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true,
  allowedHeaders: '*',
  methods: ['PUT', 'GET', 'POST', 'DELETE']
}));

• 通用方案：直接在后端响应中添加头部

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: PUT, GET, POST, DELETE
Access-Control-Allow-Headers: *

开发环境临时绕开 #

修改React项目的package.json添加代理配置：

{
  "name": "your-react-app",
  "proxy": "http://localhost:8080"
}

之后请求地址改为/admin/updateroomprice，开发服务器会自动转发请求，规避CORS限制。

二、解决请求对象无“Object”标注的问题 #

这种情况说明你传递的不是标准JavaScript对象，排查和修复方向：

• 检查是否误将请求体转为字符串未解析，或者传递了null/undefined、类实例而非纯对象。
• 调试时打印typeof 你的请求数据和你的请求数据.constructor.name，确认类型是否为object和Object。
• 确保请求体是纯对象结构，示例：

const reqData = {
  roomId: 123,
  newPrice: 200
};
axios.put('/admin/updateroomprice', reqData);

使用fetch时，记得正确设置请求头：

fetch('/admin/updateroomprice', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(reqData)
});

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