axios 报错403 axios 405

转载

mob64ca14005461 2023-08-21 14:21:06

文章标签 axios 报错403 ios 数组 Data 文章分类 iOS 移动开发

1、昨天用nutui库的上传组件，发现返回405。
后来尝试axios.get 状态200
axios.post 状态405
故究其原因应该解析post请求失败。
后来百度一次次。

axios.post失败，解决方案：
1、将http://localhost:8082改为http://127.0.0.1:8082/avatar （post不能请求根路径）
2、axios.post，不允许直接读取json格式文件。
3、host地址的nginx代理需配置 add_header Access-Control-Allow-Origin *;（可能对于一些methods不适合）
4、发送较标准的axios.post格式

axios.post('http://127.0.0.1:8082/avatar', qs.stringify({id: '2016011172'}), {
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded'
	}
}).then(res => {
	console.log(res)
})

2、vue-cli3.0配置devServer proxy，复杂配置无效，直接暴力改变origin。有人解决了告诉我下哈。

devServer: {
	host: '127.0.0.1',
	port: 8080,
	proxy: '' // 改变全局origin指向即可
}

3、使用nutUi的uploader上传图片失败，研究近半天，发现官网上传也失败，什么**东西？？？
罪过，罪过，只是觉得官网…不应该。

4、查阅了大量网站终于实现了单图片上传。
1、前端使用 input[file] + axios.post
2、后端使用 nodejs + multer

前端部分

<template>
  <div class="uploader">
		<div class="uploader-wrapper">
			<input class="button" 
			       type="file" 	
			       @change="getFile" 
			       name="upload">
		</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
	methods: {
		getFile (e) {
			// 一旦获得image直接上传
			this.uploadFile(e.target.files)
		},
		uploadFile (files) {
			const fd = new FormData()
			const file = files[0]
			const output = files[0].name
			fd.append('file', files[0], output)
			axios.post('http://localhost:3000/avatar', fd, {
				headers: {
					'Content-Type': 'multipart/form-data'
				}
			}).then( res => {
				console.log(res)
			})
		}
	}
}
</script>

注：将数据转为FormData对象，其用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,

后端部分：

axios 报错403 axios 405_ios

注：此处用的multer插件，划线三处重点。最后的file需和param传递过来的键名一致。

接下来是进阶优化。
multer 没查看源码，不想深入。
它做的事我就认为是，将文件写入指定目录。
好了，接下来你就该让文件存放到想要的正确位置，以及正确命名。

涉及到 require(‘fs’)

axios 报错403 axios 405_数组_02

axios 报错403 axios 405_数组_03

文件夹的剪切以及重命名均可以用fs.rename，这里我摘自（作者：sunlizhen

来源：CSDN ）

/*
重命名：fs.rename();
fs.rename(oldPath,newPath,callback)
oldPath:代表原来路径的名称；
newPath：代表修改后的路径的名称；
callback：回调函数；
/
//
var fs = require(“fs”);
fs.rename("./xieru.txt","./chongmingming.txt",function(err){
console.log(err);
})
/
fs.rename(oldPath,newPath,callback) 剪切文件名；
将oldPath文件，复制为newPath文件；
*/
fs.rename("./yangyang.jpg","./kechen.jpg",function(err){
console.log(err)
})