同服务器,其他接口正常。唯独上传图片接口报跨域错误。代码如下,求教大佬,这代码有无问题?或者是 php 后台需要修改?
<!DOCTYPE html>
<html lang="en" style="font-size: 15px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>图片</title>
<link rel="stylesheet" href="css/base.css" type="text/css">
<link rel="stylesheet" href="css/layer.css" type="text/css">
<script src="lib/vue-2.5.1.js" type="text/javascript"></script>
<script src="lib/vue-resource.js" type="text/javascript"></script>
<script src="lib/jquery.min.js" type="text/javascript"></script>
<script src="lib/layer.js" type="text/javascript"></script>
<style>
html,
body {
width: 100%;
height: 100%;
}
#box {
width: 50%;
height: 11.521rem;
margin: 2.88rem auto;
border: 1px solid black;
}
.imgbox {
width: 100%;
height: 5.76rem;
border: 1px solid red;
background: url();
}
</style>
</head>
<body>
<div id="box">
<div :style="'background:url('+imgurl+');'" class="imgbox"></div>
<input id="imginput" class="imginput" type="file" accept="images/*" @change="upfileimg">
</div>
</body>
<script>
var vm = new Vue({
el:"#box",
data:{
imgurl:"",
imagename:""
},
methods:{
upfileimg:function (argument) {
var files = argument.target.files[0];
if (!files.type.match('image.*')) {
layer.open({
content:"不是图片格式!",
skin:"msg"
})
return;
}
this.imagename = files.name;
var self = this;
var regead = new FileReader();
regead.onload = function (e) {
self.imgurl = e.target.result;
};
regead.readAsDataURL(files);
// var imageurl = document.getElementById('imginput').files[0];
// console.log(imageurl); //这个imageurl有说法可以替换下面的this.imageurl,但还是不行
var fd = new FormData();
fd.append("file",this.imgurl,this.imagename);
this.$http.post("xxx",{
file:fd
}).then(function (argument) {
console.log(argument);
},function (argument) {
console.log(argument);
})
}
}
})
</script>
</html>
php 单独出一个接 base64 的接口,普通的 post 就可以上传 base64.
为何这个 base64 转二进制不行?后台好像用的 thinkphp 框架
报这个错一般需要后端去解决下,也很简单。
请求分为两种,简单请求和非简单请求
虽然这里和其它的地方都是使用post请求,但是可能你设置了HTTP的头信息使之成为了跨域非简请求
跨域资源共享 CORS 详解