ВАРИАНТЫ 404 при загрузке файла Vue.js - PullRequest
Новая
       8

ВАРИАНТЫ 404 при загрузке файла Vue.js

0 голосов
/ 07 декабря 2018

Я определил cors в своем приложении express, и у меня нет этой проблемы с большинством маршрутов.Но для определенного компонента, который я использую для загрузки изображений: 

<input type="file" class="form-control" @change="imageChagned">

<div  @click="postPhoto">Upload Photo</div>

методы: 

postPhoto: function() {
    console.log('sending photo');
    axios.post( this.BASE_URL + "/profile/addphoto", {
    file: this.image 
    }, this.jwt).then( (res) => { 
    console.log('after photo sent');
    this.image = '';
    console.log(res);
    })
      .catch( (error) => { 

        console.log(error);

      });

},

imageChagned(e) { 
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = (e) => {
            this.image = e.target.result;    
        }
    }

Я получаю эту ошибку в браузере: 

OPTIONS http://127.0.0.1:3000/profile/addphoto 404 (Not Found)
dispatchXhrRequest @ xhr.js?b50d:178
xhrAdapter @ xhr.js?b50d:12
dispatchRequest @ dispatchRequest.js?5270:59
Promise.then (async)
request @ Axios.js?0a06:51
Axios.(anonymous function) @ Axios.js?0a06:71
wrap @ bind.js?1d2b:9
postPhoto @ AddPhoto.vue?0625:242
invoker @ vue.runtime.esm.js?2b0e:2023
fn._withTask.fn._withTask @ vue.runtime.esm.js?2b0e:1822
addphoto:1 Access to XMLHttpRequest at 'http://127.0.0.1:3000/profile/addphoto' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

здесьэто маршрутизатор, который получает сообщение: 

  router.post('/addphoto',  checkAuth, (req, res)=> {

    console.log('add photo post received');
       let filename = Math.floor(Math.random() * 100000);
  let dir = './uploads/' + req.user.id;
    if (!fs.existsSync(dir)){
        fs.mkdirSync(dir);
    }   
    base64String = req.body.file;
    let str = base64String.split(';base64,');
    let base64Image = str[1];
    let extRaw = str[0];
    let ext = extRaw.split('/')[1].toLowerCase();
    let extArray = ['jpg', 'jpeg', 'png', 'gif'];
    const buffer = Buffer.from(base64String.substring(base64String.indexOf(',') + 1));
    fileSizeMB = buffer.length / 1e+6
    //Check file extension
    if (!extArray.includes(ext)) {
      res.status(403).json({msg: 'error: file extention not allowed'})
      return
    };

    //Check file size
    if(fileSizeMB > 5) {
      res.status(403).json({msg: 'error: file is too large'})
      return
    }

    let imgId =  filename + '.' + ext; 
    let filePath = dir + "/" + imgId;
    fs.writeFile( filePath, base64Image, {encoding: 'base64'}, function(err) {
      });
      const photoFields = {};
      photoFields.photos = []
      let p = {}

      p.imgId =  imgId  ;
      p.visible = 'all'
    User.findOne({ _id: req.user.id }).then(user => {
      if (!user.images.profileImg.length > 0 ) {
        user.images.profileImg = p.imgId;
      }

      user.images.photos.push(p);
      user.save().then(()=>{
        console.log('new photo is saved');
        res.json({ images: user.images });
      }).catch(err =>
      console.log(err)
      );

    });


  });

Эта проблема беспокоит меня в течение многих часов, поэтому очень ценю ваши советы по ее устранению.

Странно то, что компонент работал нормально, но он перестал работать после некоторых небольших изменений, которые я внес в свой код.

1 Ответ

0 голосов
/ 07 декабря 2018

Как указывает ошибка, для метода OPTIONS нет конечной точки с именем /profile/addphoto.Отправленный вами маршрут не будет обработан запросом OPTIONS, поскольку вы указали, что он получает только POST.

Запрос OPTIONS используется, чтобы позволить запрашивающему узнать, как ему разрешено использоватьВаш API, поэтому просто верните статус 200 после установки заголовков Cors.Я обычно делаю это, добавляя это для перехвата любого OPTIONS запроса к API.Просто добавьте его где-нибудь в начале маршрутизации: 

app.use(function(req, res, next) {
    res.set('Access-Control-Allow-Origin', '*');
    res.set('Access-Control-Allow-Headers', 'Origin, Accept, Content-Type, X-Requested-With, auth_token, X-CSRF-Token, Authorization');
    res.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE, PUT, PATCH');
    res.set('Access-Control-Allow-Credentials', 'true');

    // intercept OPTIONS method
    if (req.method === 'OPTIONS') {
        return res.status(200).end();
    }

    next();
});
...