Froala Editor AWS S3 CORS issue

Question

I have implemented Froala Editor in my Angular 4 application. I try to upload the image on AWS S3 but I get the CORS error. Here are my files.

server-side (to generate signature):

'use strict';
 var FroalaEditor = require('../../node_modules/wysiwyg-editor-node- 
 sdk/lib/froalaEditor.js');
 module.exports = function(server) {
 var router = server.loopback.Router();
 router.get('/api/get_signature', function(req, res) {
    var configs = {
        bucket: 'bucket',
        region: 's3',

        // The folder where to upload the images.
        keyStart: 'email',

        // File access.
        acl: 'public-read',

        // AWS keys.
        accessKey: 'xxxxxxx',
        secretKey: 'xxxxxxxxxx'
    }

    var s3Hash = FroalaEditor.S3.getHash(configs);

    res.send(s3Hash);
});
server.use(router);
}

Here is my angular component file:

  //initialize froala after getting the signature
  public initialize(initControls) {
  this.froala = initControls;
  this._RestService.getEditorSignature().subscribe(
  d => {
    this.editorOptions['imageUploadToS3'] = d;
    this.froala.initialize();
  });
 }

Here is my Cors configuration:

<CORSConfiguration>
          <CORSRule>
              <AllowedOrigin>http://localhost:4200</AllowedOrigin>
              <AllowedMethod>GET</AllowedMethod>
              <AllowedMethod>POST</AllowedMethod>
              <AllowedMethod>PUT</AllowedMethod>
              <MaxAgeSeconds>3000</MaxAgeSeconds>
              <AllowedHeader>Authoriz</AllowedHeader>
          </CORSRule>
 </CORSConfiguration>

After all these I still get this error

I have also tried using "*" in and but still not working. Can anyone put me in right direction?

Shahrukh Shahid Shahrukh Shahid · Accepted Answer · 2018-07-10T21:04:29

Actually everything is working fine. I changed the region from s3 to ap-south-1. I misjudged the bucket region.

Froala Editor AWS S3 CORS issue

1 Answers