element-ui上传组件el-upload文件上传阿里云oss出现405 Method not allowed错误问题

今天在vue项目中出现了这个问题。在本地调试时文件上传正常但是打包到线上后出现了405 Method not allowed的错误。其实这个错误挺明确的，只是在分析的时候我们很难理性的去仔细查找。现将405错误分析，以及我的错误和解决办法分享如下。

405 Method not allowed错误

405码出现的原因有很多种的，一般我们使用post时出现405 错误最大的可能是 Web 服务器没有被设置为从客户端接受输入数据而出现。通俗的将就是没有相关的处理方法。

vue开发中出现的原因

在我的项目中因为前后端分离，而且前后端是不同域名的。这就出现了跨域的问题，在vue本地开发中我们大家都可以使用vue.config.js的proxy项来设置代理从而解决跨域问题。但是打包发布后就不行了，vue.config.js中的proxy配置仅仅是用于开发调试用的。我们一般会在自己封装的request中来根据开发环境和生产环境的不同而设置不同的api地址。在我的vue项目中也是这样处理的。但是为什么405会出现在element-ui的el-upload中呢？因为使用el-upload一般使用action设置地址来上传文件到action的地址中。如果我们设置的只是路径，那么本地开发时是可以代理的，但是打包发布后是没有代理的。所以会请求我们的前端url加action中的path地址上传。所以会找不到相应的处理方法会报405。

在阿里云oss中的405 Method not allowed错误

阿里云oss的405错误是和http status的405对应的那么就是你调用了不存在的处理方法。如果你本地调用没问题而且调用的方法都是阿里云sdk或者api调用的那么你就要按照我上边出现的问题来解决了。

解决办法

我们咋element-ui的el-upload设置action属性时可以判断当前的环境来设置请求url。这个问题虽然是由于疏忽造成的，但是一般遇到http status code的错误大家都会失去理性的没法安静分析。所以，如果出现405错误后按F12打开开发者工具后查看network中请求的地址，来排查错误。