vue-resource上傳圖片文件報(bào)跨域錯(cuò)誤。

同服務(wù)器，其他接口正常。唯獨(dú)上傳圖片接口報(bào)跨域錯(cuò)誤。代碼如下，求教大佬，這代碼有無(wú)問(wèn)題？或者是 php 后臺(tái)需要修改？

圖片描述

<!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); //這個(gè)imageurl有說(shuō)法可以替換下面的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 單獨(dú)出一個(gè)接 base64 的接口，普通的 post 就可以上傳 base64.

為何這個(gè) base64 轉(zhuǎn)二進(jìn)制不行？后臺(tái)好像用的 thinkphp 框架

回答

編輯回答

怣痛

你這個(gè)是屬于跨域不被允許的問(wèn)題，我也遇到過(guò)。
當(dāng)時(shí)我的解決方法是，在config/index.js里面的proxyTable{} 設(shè)置代理解決的。
下面是我設(shè)置的三個(gè)代理你可以參考一下：
proxyTable: {

        //獲取單首歌曲信息
        '/getsongapi': {
            target: 'http://www.kugou.com/',//請(qǐng)求數(shù)據(jù)的地址
            secure: false,//false:請(qǐng)求方式為http，true:請(qǐng)求方式為https
            changeOrigin: true,//是否進(jìn)行跨域
            pathRewrite: {
                '^/getsongapi': '/'  //target后面的文件夾名字    
            },
        },
        //從m.kugou.com獲取數(shù)據(jù)
        '/api': {
            target: 'http://m.kugou.com/', //請(qǐng)求數(shù)據(jù)的地址
            secure: false, //false:請(qǐng)求方式為http，true:請(qǐng)求方式為https
            changeOrigin: true, //是否進(jìn)行跨域
            pathRewrite: {
                '^/api': '/' //target后面的文件夾名字    
            },

        },
        '/search': {
            target: 'http://mobilecdn.kugou.com/', //請(qǐng)求數(shù)據(jù)的地址
            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'
        }

    }

2018年8月8日 08:03

編輯回答

冷眸

報(bào)這個(gè)錯(cuò)一般需要后端去解決下，也很簡(jiǎn)單。
請(qǐng)求分為兩種，簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求
雖然這里和其它的地方都是使用post請(qǐng)求，但是可能你設(shè)置了HTTP的頭信息使之成為了跨域非簡(jiǎn)請(qǐng)求
跨域資源共享 CORS 詳解

2017年6月2日 20:32