Загрузка S3 с помощью Next.js - Проблемы - PullRequest
Новая
       17

Загрузка S3 с помощью Next.js - Проблемы

0 голосов
/ 20 июня 2019

Я пытаюсь загрузить файл напрямую в корзину S3 без серверной части. Частично я могу получить подпись и подписанный запрос, но получаю ошибку CORS. Я включил все CORS из корзины S3, но кажется, что код комплантируется одинаково

Вот код ... 

import React, { Component } from 'react';
import fetch from 'isomorphic-unfetch';
import AWS from 'aws-sdk';
import FormData from 'form-data';

class Issues extends Component {

  constructor(props) {
    super(props);

    this.state = {
      file: [],
    };
  }

  // Perform S3 signature generation
  s3Signature = (file) => {
      return new Promise((resolve, reject) => {

        const s3 = new AWS.S3({accessKeyId: 'XXXXXXXXXXXXXXXXXX', 
        secretAccessKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', 
        endpoint: 's3-eu-central-1.amazonaws.com', 
        region: 'eu-central-1'});

        const myBucket = 'bucket-1';

        const fileName = file.name;
        const fileType = file.type;

        const params = {
          Bucket: myBucket,
          Fields: {
            key: file.name
          },
          Conditions: [
            ['content-length-range', 0, 10000000], // 10 Mb
            {'acl': 'public-read'}
            ]
        };

        s3.createPresignedPost(params, function(err, data) {
          if (err) {
            console.error('Presigning post data encountered an error', err);
          } else {        
            resolve(data);
          }
        });
      });  
    }

    sendFile = (file, payload) => {  

      var foo = document.getElementById('form');      
      var form = new FormData(foo);  

      form.append('acl', 'public-read');
      form.append('Access-Control-Allow-Origin', '*');

      for(const field in payload.fields) {
        // console.log(field+'=>'+payload.fields[field]);
        form.append(field, payload.fields[field]);
      }

      form.append('file', file)

      fetch(payload.url, {
          method: 'PUT',
          body: form,
          headers: {
            'Access-Control-Allow-Origin': '*',            
        }
      })
      .then((response) => {
          console.log(response.ok);
          console.log(response.status);
          console.log(response.statusText);
          return response.text();
      })
      .then((payload) => {
          console.log(payload);
      })
      .catch((err) => console.log(`Error: ${err}`));

  };

  handleFormSubmit = (event) => {
    event.preventDefault();
    console.log(event); 
    console.log(this.state.file)    
    const fileName = this.state.file.name
    this.s3Signature(this.state.file).then((payload) => { this.sendFile(this.state.file, payload); });        
  }

  onChangeHandler = (event) => {
    this.setState({file: event.target.files[0]})
  }  

  render() {
      return (
      <div>
         <form id='form' method='post' onSubmit={this.handleFormSubmit.bind(this)}>          
            <input type="file" name="file" onChange={this.onChangeHandler}/>
          <input type="submit" value="Submit" />
         </form> 
      </div>
    );
  }

export default Issues;

Error

Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение удаленный ресурс на https://s3 -eu-central-1.amazonaws.com / BUCKET_NAME (причина: Отсутствует заголовок CORS «Access-Control-Allow-Origin».

Ошибка: TypeError: NetworkError при попытке извлечь ресурс. вопроса.js: 83 (это из S3)

...