Pluralsight issue

[WolverineSix]

Ryan - I have been following your AWS developer course on pluralsight and have just finished the CORS configuration. I am now testing the application calls from my localhost to the s3 bucket. While loading the make pizza page, I am getting CORS errors, but ONLY on the first three images loaded (dough_crust, marinara, and mozzarella) this is the error:

Access to Image at 'http://s3.us-east-2.amazonaws.com/pizza-luvrs-rick-grubb/toppings/dough_crust.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

all of the other images load fine (like the money ones, or rainbows, etc). I tried removing the files from the bucket, re-uploading them...I even tried giving all the files read/write access. Any ideas?

[ryanmurakami]

Hi! Sorry to hear you're having trouble. CORS can be tricky! Can you post the xml from your CORS configuration so I can take a look?

[WolverineSix]

The AWS Management Console has changed a bit since you did the video, so I have been figuring it out as I went...

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><AllowedOrigin>*</AllowedOrigin><AllowedMethod>GET</AllowedMethod><MaxAgeSeconds>3000</MaxAgeSeconds><AllowedHeader>Authorization</AllowedHeader></CORSRule></CORSConfiguration>

Thanks so much for your help.

[ryanmurakami]

Ach, I know! Bad amazon. They changed the UI a week after the class went live. :-/

So, that CORS configuration looks perfectly fine. Can you try it in a different browser? I remember that some people had some issues with Chrome before.

When I tried pulling that pizza dough image above, it doesn't give me an error, and the headers are correct. The headers you should care about in the request are:

Request header - Origin Response header - Access-Control-Allow-Origin

Can you try again and take a look in your network requests in the browser and see if those headers are present? If not, could you include the request/response headers for a failing request and a successful request?

Thanks!

[WolverineSix]

For the one that doesn't work, I see this:

Request URL:http://s3.us-east-2.amazonaws.com/pizza-luvrs-rick-grubb/toppings/dough_crust.png Request Headers Provisional headers are shown Origin:http://localhost:3000 Referer:http://localhost:3000/make/pizza User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

for the ones that work, I see: Request URL:http://s3.us-east-2.amazonaws.com/pizza-luvrs-rick-grubb/toppings/cheddar_cheese.png Request Method:GET Status Code:200 OK (from disk cache) Remote Address:165.225.34.41:18000 Response Headers Accept-Ranges:bytes Access-Control-Allow-Methods:GET Access-Control-Allow-Origin:* Access-Control-Max-Age:3000 Content-Length:320266 Content-Type:image/png Date:Fri, 03 Mar 2017 23:20:17 GMT ETag:"2383348d521a3052a776a56df9896207" Last-Modified:Fri, 03 Mar 2017 15:44:06 GMT Server:AmazonS3 Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method x-amz-id-2:QPfkU57XZ9iIMf/1QqAMEi76jm1BnHAaoElNC0Ae0N0rCFXMVIvgSfczPi/t48Ttf/Sd+jliXq0= x-amz-request-id:6E260611EFB3CF5F Request Headers Provisional headers are shown Origin:http://localhost:3000 Referer:http://localhost:3000/make/pizza User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

so, no headers? for the ones that don't work? Also, no need ot work hard on this on a Friday night...it'll still be broken Monday.

[ryanmurakami]

Yeah, that is really weird. One thing I am seeing is that it looks like the cheddar_cheese.png file might be returned from your browser cache instead of the server. Can you make sure that browser cache is turned off?

The other thing I'm seeing is that the headers for dough_crust.png are just provisional, which usually means the request hasn't completed. Hmm....

[WolverineSix]

Couple of things I tried: Cleared Browser Cache - but now, no pictures loaded, just the broken image icon I have a work proxy that is on even at home, so I turned that off. Page loaded fine, same errors on the same files.

In any case, I am not sure it is relevant to continuing the course, so I am going to drive on and see if it causes any issues downstream.

[ryanmurakami]

Hmm... yeah, you can continue on without that part, but it's still frustrating. Did you try in firefox?

[WolverineSix]

Ryan- I had the same issue once I loaded it in EC2. A peer directed me towards a chrome plugin (https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en) that will allow for CORS to turn off and on (CAUTION: if it is ON, it causes errors in the AWS Console). However, when it is ON...it DOES load the images normally.

We tried a couple of things:

1. deleting the dough_crust.png file from s3 (causes a 404 for the image, but then LOADS the next two images AS EXPECTED)
2. changing all references to dough_crust.png in the code to dough1_crust.png (but that acted strange - as if the code was still looking for the original picture and caused more errors.)

I finally settled on perhaps there is something corrupted in the file - or there is a piece of code that I am unaware affects it and/or I messed up. Either way - driving forward with the RDS section.

Thanks for all your help.

[WolverineSix]

FYI - I even switch the .png image with another file and named it the same way. The preview of it loads fine in the "choose your toppings" screen, it just doesn't load in the "pizza preview" pane...neither do the following 2 choices.

[SushmaRamakrishna]

Hello Ryan: I have been following your AWS developer course on pluralsight and have just finished Updating and Deploying to EC2 Instance.

Successfully deployed the demo to an EC2 instance. Started the application up with the command npm start The output message says the app is running at a 10.x IP, Opened up a browser window, and entered the elastic IP, then colon, and the port 3000.

3000 see pizza luvrs load up. Is this pizza luvrs running on an EC2 instance? I tried logging in using my Admin account user. I see this error {"statusCode":401,"error":"Unauthorized"} I get the same error when I access the url using localhost This the information I see on the command prompt. [ec2-user@ip-10-0-0-194 ~]$ ls pizza-luvrs [ec2-user@ip-10-0-0-194 ~]$ cd pizza-luvrs/ [ec2-user@ip-10-0-0-194 pizza-luvrs]$ npm install [ec2-user@ip-10-0-0-194 pizza-luvrs]$ npm start > pizza-luvrs@1.0.0 start /home/ec2-user/pizza-luvrs > node index.js Server running at: http://ip-10-0-0-194:3000 (node:30033) DeprecationWarning: crypto.pbkdf2 without specifying a digest is deprecated. Please specify a digest Should the security group for the instance have incoming requests on port 8080 as open to anyone? Thank you,

[serrryam]

Just off an observation, the three images that were failing were the only three to use the same image in both the preview and canvas sections. Uploaded copies of each of the files with _big appended before the .png updated the names in toppings.js. Everything working as expected now.

Not sure why it would be an issue pulling the same file name twice, but fixed it for me without any edits to the CORS configuration.

[oniseijin]

Yep, the above worked for me as well; with the additional _big files for the three mentioned

data/toppings.js snippet

function initToppings (callback) {
  createTopping('Dough Crust', 'dough_crust.png', 'dough_crust_big.png', 1);
  createTopping('Marinara Sauce', 'marinara_sauce.png', 'marinara_sauce_big.png', 2);
  createTopping('Mozzarella Cheese', 'mozzarella_cheese.png', 'mozzarella_cheese_big.png', 3);
  createTopping('Cheddar Cheese', 'cheddar.png', 'cheddar_cheese.png', 4);
  createTopping('Mushrooms', 'mushroom.png', 'mushrooms.png', 5);
  createTopping('Pepperoni', 'pepperoni.png', 'pepperonis.png', 6);
  createTopping('Laser Beams', 'laser_beam.png', 'laser_beams.png', 7);
  createTopping('Banana Peppers', 'banana_pepper.png', 'banana_peppers.png', 8);
  createTopping('Ham', 'ham.png', 'hams.png', 9);
  createTopping('Green Peppers', 'green_pepper.png', 'green_peppers.png', 10);
  createTopping('Rainbows', 'rainbow.png', 'rainbows.png', 11);
  createTopping('Money', 'money.png', 'moneys.png', 12);
  if (callback) callback();
}

[vctespiritu]

Hello Everyone,

The above worked perfectly. However, now when I click the create button it returns an error to the console saying, "POST http://localhost:3000/pizza 500 (Internal Server Error)".

Any comments?

[ryanmurakami]

Hi @vctespiritu, Can you look in your server and see if there's an error output there? 500 doesn't give me enough info to help troubleshoot.

Thanks!

[vctespiritu]

Hi @ryanmurakami,

Sorry but I'm trying to put all the pieces together in this course. I have limited knowledge about web development and I haven't gotten too deep into the server-side of it. Can you walk me to the process and explain how can I get into the server and see the error output?

Thanks.

[ryanmurakami]

@vctespiritu, No problem. Are you running the code locally or on the server? Try running the code locally and see if it works. In the same command line that you run npm start, you should see output when the error occurs.

[vctespiritu]

@ryanmurakami it's running locally. Terminal is not displaying any error message after clicking the create button. it only says "Server running at" which is the message when I enter npm start.

[ryanmurakami]

Is this after you've logged in?

[vctespiritu]

Hi Ryan,

Sorry for the delay. So, yes. It's after I log in and select my favorite pizza toppings when I click the Create button it gives me this error:

jquery-3.0.0.min.js:4 POST http://localhost:3000/pizza 500 (Internal Server Error) send @ jquery-3.0.0.min.js:4 ajax @ jquery-3.0.0.min.js:4 sendPizza @ make.js:66 onclick @ pizza:21

Thanks

[ryanmurakami]

Hmm... so, a 500 error means there's an error on the server. You're saying there's no error being output? Can you try adding some console logs in this function because that's what should be handling the request. Let me know what it says.