POST Cors error on Deployed site

[sangelici]

Problem

Experiencing an error when I try to create a new listing on my deployed react app. In the console, I receive this error:

POST https://pure-thicket-58776.herokuapp.com/artworks 503 (Service Unavailable)
POST https://pure-thicket-58776.herokuapp.com/artworks 503 (Service Unavailable)
Access to XMLHttpRequest at 'https://pure-thicket-58776.herokuapp.com/artworks' from origin 'https://sangelici.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have gone back to my API in the terminal and redid the heroku config command heroku config:set CLIENT_ORIGIN="https://sangelici.github.io" to ensure that is was set up correctly. I also reviewed both my MLAB and AWS set and have verified that they are also correct.

The next step was to run heroku logs in the terminal and that is where I discovered another error

2019-12-08T20:38:13.597119+00:00 app[web.1]: ============================
2019-12-08T20:38:13.597121+00:00 app[web.1]: 
2019-12-08T20:38:13.686165+00:00 heroku[router]: at=info method=POST path="/sign-in" host=pure-thicket-58776.herokuapp.com request_id=cc7c2b8f-af8d-42a6-954e-7b01f1a59451 fwd="108.49.47.103" dyno=web.1 connect=0ms service=89ms status=201 bytes=475 protocol=https
2019-12-08T20:38:24.372597+00:00 heroku[router]: at=info method=OPTIONS path="/artworks" host=pure-thicket-58776.herokuapp.com request_id=d93f229e-f0e1-4ef9-8dda-82160ea0de19 fwd="108.49.47.103" dyno=web.1 connect=0ms service=3ms status=204 bytes=336 protocol=https
2019-12-08T20:38:24.394122+00:00 app[web.1]: 
2019-12-08T20:38:24.394139+00:00 app[web.1]: ===== Incoming Request =====
2019-12-08T20:38:24.394141+00:00 app[web.1]: 
2019-12-08T20:38:24.394200+00:00 app[web.1]: Sun Dec 08 2019 20:38:24 GMT+0000 (Coordinated Universal Time)
2019-12-08T20:38:24.394262+00:00 app[web.1]: POST /artworks
2019-12-08T20:38:24.394332+00:00 app[web.1]: body {}
2019-12-08T20:38:24.394383+00:00 app[web.1]: 
2019-12-08T20:38:24.394386+00:00 app[web.1]: ============================
2019-12-08T20:38:24.394387+00:00 app[web.1]: 
2019-12-08T20:38:26.514824+00:00 app[web.1]: /app/node_modules/aws-sdk/lib/request.js:31
2019-12-08T20:38:26.514841+00:00 app[web.1]: throw err;
2019-12-08T20:38:26.514844+00:00 app[web.1]: ^
2019-12-08T20:38:26.514846+00:00 app[web.1]: 
2019-12-08T20:38:26.514849+00:00 app[web.1]: MissingRequiredParameter: Missing required key 'Bucket' in params
2019-12-08T20:38:26.514851+00:00 app[web.1]: at ParamValidator.fail (/app/node_modules/aws-sdk/lib/param_validator.js:50:37)
2019-12-08T20:38:26.514853+00:00 app[web.1]: at ParamValidator.validateStructure (/app/node_modules/aws-sdk/lib/param_validator.js:61:14)
2019-12-08T20:38:26.514855+00:00 app[web.1]: at ParamValidator.validateMember (/app/node_modules/aws-sdk/lib/param_validator.js:88:21)
2019-12-08T20:38:26.514857+00:00 app[web.1]: at ParamValidator.validate (/app/node_modules/aws-sdk/lib/param_validator.js:34:10)
2019-12-08T20:38:26.514859+00:00 app[web.1]: at Request.VALIDATE_PARAMETERS (/app/node_modules/aws-sdk/lib/event_listeners.js:126:42)
2019-12-08T20:38:26.514861+00:00 app[web.1]: at Request.callListeners (/app/node_modules/aws-sdk/lib/sequential_executor.js:106:20)
2019-12-08T20:38:26.514863+00:00 app[web.1]: at callNextListener (/app/node_modules/aws-sdk/lib/sequential_executor.js:96:12)
2019-12-08T20:38:26.514865+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/event_listeners.js:86:9
2019-12-08T20:38:26.514867+00:00 app[web.1]: at finish (/app/node_modules/aws-sdk/lib/config.js:379:7)
2019-12-08T20:38:26.514869+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/config.js:421:9
2019-12-08T20:38:26.514871+00:00 app[web.1]: at Object.<anonymous> (/app/node_modules/aws-sdk/lib/credentials/credential_provider_chain.js:111:13)
2019-12-08T20:38:26.514873+00:00 app[web.1]: at Object.arrayEach (/app/node_modules/aws-sdk/lib/util.js:516:32)
2019-12-08T20:38:26.514875+00:00 app[web.1]: at resolveNext (/app/node_modules/aws-sdk/lib/credentials/credential_provider_chain.js:110:20)
2019-12-08T20:38:26.514877+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/credentials/credential_provider_chain.js:126:13
2019-12-08T20:38:26.514879+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/credentials.js:124:23
2019-12-08T20:38:26.514881+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/credentials.js:212:15
2019-12-08T20:38:26.523154+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-12-08T20:38:26.523521+00:00 app[web.1]: npm ERR! errno 1
2019-12-08T20:38:26.524623+00:00 app[web.1]: npm ERR! pigment-api@0.0.1 start: `node server.js`
2019-12-08T20:38:26.524744+00:00 app[web.1]: npm ERR! Exit status 1
2019-12-08T20:38:26.524939+00:00 app[web.1]: npm ERR!
2019-12-08T20:38:26.525067+00:00 app[web.1]: npm ERR! Failed at the pigment-api@0.0.1 start script.
2019-12-08T20:38:26.525184+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-12-08T20:38:26.532803+00:00 app[web.1]: 
2019-12-08T20:38:26.532966+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2019-12-08T20:38:26.533051+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2019-12-08T20_38_26_526Z-debug.log
2019-12-08T20:38:26.590283+00:00 heroku[web.1]: State changed from up to crashed
2019-12-08T20:38:26.596142+00:00 heroku[web.1]: State changed from crashed to starting
2019-12-08T20:38:26.520940+00:00 heroku[router]: at=error code=H13 desc="Connection closed without response" method=POST path="/artworks" host=pure-thicket-58776.herokuapp.com request_id=fe6bc3fb-60a1-4213-a50c-3933305435b9 fwd="108.49.47.103" dyno=web.1 connect=1ms service=2128ms status=503 bytes=0 protocol=https
2019-12-08T20:38:26.577541+00:00 heroku[web.1]: Process exited with status 1
2019-12-08T20:38:29.541199+00:00 heroku[web.1]: Starting process with command `npm start`
2019-12-08T20:38:31.447435+00:00 app[web.1]: 
2019-12-08T20:38:31.447463+00:00 app[web.1]: > pigment-api@0.0.1 start /app
2019-12-08T20:38:31.447465+00:00 app[web.1]: > node server.js
2019-12-08T20:38:31.447468+00:00 app[web.1]: 
2019-12-08T20:38:32.606252+00:00 heroku[web.1]: State changed from starting to up
2019-12-08T20:38:32.461226+00:00 app[web.1]: (node:23) DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
2019-12-08T20:38:32.462833+00:00 app[web.1]: listening on port 42257
2019-12-08T20:44:11.937627+00:00 heroku[router]: at=info method=OPTIONS path="/artworks" host=pure-thicket-58776.herokuapp.com request_id=14526ab6-29ad-4ce0-8851-724deaff3f45 fwd="108.49.47.103" dyno=web.1 connect=0ms service=8ms status=204 bytes=336 protocol=https
2019-12-08T20:44:11.965277+00:00 app[web.1]: 
2019-12-08T20:44:11.965295+00:00 app[web.1]: ===== Incoming Request =====
2019-12-08T20:44:11.965297+00:00 app[web.1]: 
2019-12-08T20:44:11.965550+00:00 app[web.1]: Sun Dec 08 2019 20:44:11 GMT+0000 (Coordinated Universal Time)
2019-12-08T20:44:11.965598+00:00 app[web.1]: POST /artworks
2019-12-08T20:44:11.965677+00:00 app[web.1]: body {}
2019-12-08T20:44:11.965726+00:00 app[web.1]: 
2019-12-08T20:44:11.965729+00:00 app[web.1]: ============================
2019-12-08T20:44:11.965731+00:00 app[web.1]: 
2019-12-08T20:44:14.087855+00:00 app[web.1]: /app/node_modules/aws-sdk/lib/request.js:31
2019-12-08T20:44:14.087868+00:00 app[web.1]: throw err;
2019-12-08T20:44:14.087870+00:00 app[web.1]: ^
2019-12-08T20:44:14.087872+00:00 app[web.1]: 
2019-12-08T20:44:14.087874+00:00 app[web.1]: MissingRequiredParameter: Missing required key 'Bucket' in params
2019-12-08T20:44:14.087877+00:00 app[web.1]: at ParamValidator.fail (/app/node_modules/aws-sdk/lib/param_validator.js:50:37)
2019-12-08T20:44:14.087879+00:00 app[web.1]: at ParamValidator.validateStructure (/app/node_modules/aws-sdk/lib/param_validator.js:61:14)
2019-12-08T20:44:14.087881+00:00 app[web.1]: at ParamValidator.validateMember (/app/node_modules/aws-sdk/lib/param_validator.js:88:21)
2019-12-08T20:44:14.087882+00:00 app[web.1]: at ParamValidator.validate (/app/node_modules/aws-sdk/lib/param_validator.js:34:10)
2019-12-08T20:44:14.087884+00:00 app[web.1]: at Request.VALIDATE_PARAMETERS (/app/node_modules/aws-sdk/lib/event_listeners.js:126:42)
2019-12-08T20:44:14.087886+00:00 app[web.1]: at Request.callListeners (/app/node_modules/aws-sdk/lib/sequential_executor.js:106:20)
2019-12-08T20:44:14.087888+00:00 app[web.1]: at callNextListener (/app/node_modules/aws-sdk/lib/sequential_executor.js:96:12)
2019-12-08T20:44:14.087890+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/event_listeners.js:86:9
2019-12-08T20:44:14.087892+00:00 app[web.1]: at finish (/app/node_modules/aws-sdk/lib/config.js:379:7)
2019-12-08T20:44:14.087893+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/config.js:421:9
2019-12-08T20:44:14.087895+00:00 app[web.1]: at Object.<anonymous> (/app/node_modules/aws-sdk/lib/credentials/credential_provider_chain.js:111:13)
2019-12-08T20:44:14.087897+00:00 app[web.1]: at Object.arrayEach (/app/node_modules/aws-sdk/lib/util.js:516:32)
2019-12-08T20:44:14.087899+00:00 app[web.1]: at resolveNext (/app/node_modules/aws-sdk/lib/credentials/credential_provider_chain.js:110:20)
2019-12-08T20:44:14.087901+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/credentials/credential_provider_chain.js:126:13
2019-12-08T20:44:14.087903+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/credentials.js:124:23
2019-12-08T20:44:14.087905+00:00 app[web.1]: at /app/node_modules/aws-sdk/lib/credentials.js:212:15
2019-12-08T20:44:14.096757+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-12-08T20:44:14.097129+00:00 app[web.1]: npm ERR! errno 1
2019-12-08T20:44:14.098133+00:00 app[web.1]: npm ERR! pigment-api@0.0.1 start: `node server.js`
2019-12-08T20:44:14.098251+00:00 app[web.1]: npm ERR! Exit status 1
2019-12-08T20:44:14.098443+00:00 app[web.1]: npm ERR!
2019-12-08T20:44:14.098571+00:00 app[web.1]: npm ERR! Failed at the pigment-api@0.0.1 start script.
2019-12-08T20:44:14.098657+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-12-08T20:44:14.103191+00:00 app[web.1]: 
2019-12-08T20:44:14.103350+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2019-12-08T20:44:14.103432+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2019-12-08T20_44_14_099Z-debug.log
2019-12-08T20:44:14.092049+00:00 heroku[router]: at=error code=H13 desc="Connection closed without response" method=POST path="/artworks" host=pure-thicket-58776.herokuapp.com request_id=e1bbfe8b-d9db-4dbf-a9bc-372dd2d63659 fwd="108.49.47.103" dyno=web.1 connect=0ms service=2133ms status=503 bytes=0 protocol=https
2019-12-08T20:44:14.168433+00:00 heroku[web.1]: State changed from up to crashed
2019-12-08T20:44:14.153889+00:00 heroku[web.1]: Process exited with status 1

/app/node_modules/aws-sdk/lib/request.js:31
2019-12-08T20:44:14.087868+00:00 app[web.1]: throw err;
2019-12-08T20:44:14.087870+00:00 app[web.1]: ^
2019-12-08T20:44:14.087872+00:00 app[web.1]: 
2019-12-08T20:44:14.087874+00:00 app[web.1]: MissingRequiredParameter: Missing required key 'Bucket' in params

upon making a POST request, my api is unable to find the 'Bucket' param I should point out that the application works locally Also, my artwork-api does have the Bucket param with information stored in my .env file

require('dotenv').config()
// Require mime-types package
require('mime-types')
// Require AWS SDK
const AWS = require('aws-sdk')
// Set AWS region
AWS.config.update({
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID,
  secretAccessKey: process.env.SECRET_ACCESS_KEY
})
// Create S3 Object instance
const s3 = new AWS.S3()
// Define bucket based on environment variable
const bucketName = process.env.BUCKET_NAME

module.exports = function (file) {
  // console.log('the file is; ', file)
  return new Promise((resolve, reject) => {
    // Create params object for s3 image
    const params = {
      Bucket: bucketName,
      Key: `${Date.now()}-${file.originalname}`,
      Body: file.buffer,
      ACL: 'public-read',
      ContentType: file.mimetype
    }
    // console.log(params)

    // Image to s3
    s3.upload(params, (err, s3Data) => {
      if (err) throw err
      resolve(s3Data)
    })
  })
}

Thoughts

My thinking is that maybe I did not connect the .env file properly to my api, but I'm also hesitant because it does run on the local server. Also, the keys in heroku are labeled as "ACCESS_KEY" and "SECRET_KEY", while the .env has them as "ACCESS_KEY_ID" and "SECRET_ACCESS_KEY". That may not be an issue, but I wanted to point it out. I have researched into the error and looked within the capstone issue queue, but have not found a solution. Will continue to research and will post an issue on the issue queue come Monday!

[esalling23]

Hi Sarah - The .env file you use locally doesn't connect with your deployed heroku application. Instead, we use the configuration variables like how you set up the CLIENT_ORIGIN.

So the main error is: MissingRequiredParameter: Missing required key 'Bucket' in params From this line: const bucketName = process.env.BUCKET_NAME

Do you have a config variable called BUCKET_NAME in your heroku settings? If not, try adding that and restarting your api.