CORS issue when uploading to AWS S3, and I'm not supposed to use cordova or fix it on the AWS, but on the client side

Ionic Framework
1

I’m using http get methods and subscribing to the data that I need to read. Here’s the example code

  getC(a,b):Observable<any>  {
      return this.http.get<C[]>(ENV.BUILD_PATH+a+"/"+b+"/"+"c.json");    
  }

Here also I had the CORS issue, but I fixed it with the chrome plugin to fix the CORS issue. So now I have the loaded data, but I need to change the data and then upload and overwrite the existing data on the JSON file. My upload looks like follows.

uploadToS3 = async (data: JSON, fileName:string, path) => {
    const params = {
      Bucket: environment.bucketName,
      Key: path+fileName,
      Body: data,
      ACL: 'public-read',
      ContentType: 'application/json'
    };

    await this.s3.putObject(params, (err, data) => {
      if (err) {
        throw err;
      }
      console.log(`File uploaded successfully.`);
      }
    );

But I get errors like this

Access to XMLHttpRequest at ‘https://bucketName.s3.region.amazonaws.com/bucketName/folderName/fileName.json’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

Can someone tell me what is the issue?, thanks in advance

2

I’m thrown off by your topic headline, because CORS by definition is something that should be addressed server-side. However, I think you have a much more pressing problem.

I haven’t used AWS in years, and the reason I quit was because I found it really expensive. I’m assuming that hasn’t changed much, and therefore it’s going to cost you or your client money every time anybody uses your AWS backend, especially for writing to it. Therefore, I would also assume that you’ve secured it so that it requires some sort of authentication to write to. Even if you have done that, if you’re going to try to write directly to the AWS bucket, you would need to hardcode those credentials into this app binary.

In summary, I think the design you have is going to render your app binary effectively a vacuum cleaner with the business end turned directly on your wallet. So I would recommend completely redesigning this entire situation.

What I would do instead is to have a middleware server that runs on hardware under your control (such as a VM running on AWS) that responds to REST requests from your app. That middleware possesses the credentials to write to your buckets, not the app itself.

In addition to massively reducing your resource theft exposure, this should also magically make your CORS situation go away, because the S3 requests will be coming from inside the proverbial house now.

3

How can we configure aws-iot-sdk in ionic 7 ?
As last we have done it in ionic 3 provided by ionic. now we are facing some issues