vue-resource上传图片文件报跨域错误。

同服务器,其他接口正常。唯独上传图片接口报跨域错误。代码如下,求教大佬,这代码有无问题?或者是 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 框架

阅读 6.1k
2 个回答

报这个错一般需要后端去解决下,也很简单。
请求分为两种,简单请求和非简单请求
虽然这里和其它的地方都是使用post请求,但是可能你设置了HTTP的头信息使之成为了跨域非简请求
跨域资源共享 CORS 详解

新手上路,请多包涵

你这个是属于跨域不被允许的问题,我也遇到过。
当时我的解决方法是,在config/index.js里面的proxyTable{} 设置代理解决的。
下面是我设置的三个代理你可以参考一下:
proxyTable: {

        //获取单首歌曲信息
        '/getsongapi': {
            target: 'http://www.kugou.com/',//请求数据的地址
            secure: false,//false:请求方式为http,true:请求方式为https
            changeOrigin: true,//是否进行跨域
            pathRewrite: {
                '^/getsongapi': '/'  //target后面的文件夹名字    
            },
        },
        //从m.kugou.com获取数据
        '/api': {
            target: 'http://m.kugou.com/', //请求数据的地址
            secure: false, //false:请求方式为http,true:请求方式为https
            changeOrigin: true, //是否进行跨域
            pathRewrite: {
                '^/api': '/' //target后面的文件夹名字    
            },

        },
        '/search': {
            target: 'http://mobilecdn.kugou.com/', //请求数据的地址
            changeOrigin: true,
            pathRewrite: {
                '^/search': '/' //target后面的文件夹名字    
            }

        },

        headers: {
            'User-Agent': 'Mozilla / 5.0(Linux; Android 6.0; Nexus 5 Build / MRA58N) AppleWebKit / 537.36(KHTML, like Gecko) Chrome / 55.0 .2883 .87 Mobile Safari / 537.36'
        }

    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题