ReactJS中使用axios PATCH更新数据遇跨域方法不允许错误求助

这个错误的核心原因很明确：你的后端服务器的CORS配置没有将PATCH方法加入允许的HTTP方法列表。

当浏览器发送PATCH这种非简单请求时，会先自动发送一个OPTIONS预检请求，询问服务器是否允许该方法。如果服务器返回的Access-Control-Allow-Methods响应头里没有包含PATCH，浏览器就会拦截后续的PATCH请求，抛出你看到的错误。

解决方案 #

1. 修改后端CORS配置（优先推荐） #

这是标准且正确的解决方式，需要在后端服务器中更新CORS规则，把PATCH添加到允许的方法集合里。下面是几种常见后端框架的配置示例：

Node.js（Express框架）

如果你使用cors中间件，调整配置如下：

const cors = require('cors');
app.use(cors({
  origin: 'http://你的前端域名:端口', // 生产环境不建议用*允许所有
  methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] // 明确包含PATCH
}));

Spring Boot（Java）

可以在接口上添加@CrossOrigin注解并指定允许的方法：

@CrossOrigin(origins = "http://你的前端域名:端口", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.PATCH})
@PatchMapping("/adslots/{id}")
public ResponseEntity<?> updateAdSlot(@PathVariable Long id, @RequestBody AdSlot adSlot) {
    // 你的更新逻辑
}

也可以配置全局CORS过滤器，确保allowedMethods包含PATCH。

Django（Python）

在项目的settings.py中更新CORS配置：

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

2. 前端临时替代方案（不推荐，仅应急用） #

如果后端暂时无法修改配置，你可以用POST请求模拟PATCH操作（需要后端支持该方式）：

export function updateAdslots(data, id) {
 return dispatch => {
 dispatch(updateAdslotsRequest());
 // 改成POST请求，在请求体里标识操作类型
 return axios.post(`http://192.168.99.100:8080/adslots/${id}`, {
   ...data,
   _method: 'PATCH' // 很多后端框架支持通过该参数识别模拟的HTTP方法
 })
 .then(res => {
 dispatch(updateAdslotsSuccess(res.data));
 })
 .catch(errors => {
 dispatch(updateAdslotsError(errors));
 })
 }
}

注意这种方式依赖后端对_method参数的解析支持，并非所有框架都兼容，仅作为临时 workaround。

关于你的前端代码 #

你的Axios和Redux action代码本身逻辑是正确的，没有语法或逻辑错误，问题完全出在后端的CORS配置上。

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