CORS policy issue when trying to access tinyurl.com

[el-guero-mero]

I get a CORS error when trying to run the BuildShortURL() function in URLShortener.jsx. I cannot discern whether this results from working within Apple's protected network or not (for example, I attempted to upload an image with the errors in question, but cannot do so for some reason), so I'll try anew when I get home.

Error message in console: Access to XMLHttpRequest at 'https://www.apple.com/iphone-7/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[whelandrew]

CORS is security feature that is usually handled by the server of the url that you are trying to access. I researched a lot of methods to work around it, but learned that it was something that had to be handled on the server end. I did find an extension for Chrome that let me go around it with a simple On/Off switch. https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en-US

If you turn off the CORS, then the app should run

From: Mateo Nares Sent: Tuesday, October 22, 2019 9:21 AM To: whelandrew/URLShortener Cc: Subscribed Subject: [whelandrew/URLShortener] CORS policy issue when trying to accesstinyurl.com (#2)

I get a CORS error when trying to run the BuildShortURL() function in URLShortener.jsx. I cannot discern whether this results from working within Apple's protected network or not (for example, I attempted to upload an image with the errors in question, but cannot do so for some reason), so I'll try anew when I get home. Error message in console: Access to XMLHttpRequest at 'https://www.apple.com/iphone-7/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[whelandrew]

And here is one for Firefox, if you use that instead 😊https://addons.mozilla.org/en-US/firefox/addon/moesif-origin-cors-changer1/

From: Mateo Nares Sent: Tuesday, October 22, 2019 9:21 AM To: whelandrew/URLShortener Cc: Subscribed Subject: [whelandrew/URLShortener] CORS policy issue when trying to accesstinyurl.com (#2)

I get a CORS error when trying to run the BuildShortURL() function in URLShortener.jsx. I cannot discern whether this results from working within Apple's protected network or not (for example, I attempted to upload an image with the errors in question, but cannot do so for some reason), so I'll try anew when I get home. Error message in console: Access to XMLHttpRequest at 'https://www.apple.com/iphone-7/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[el-guero-mero]

Great, I'll try this when I get home, as I don't believe I'm allowed to do so while onsite here at Apple ;) I recall configuring routing headers using NGINX when I was working at Cisco on a micro services project, and CORS is certainly a familiar beast. Thank you.

[whelandrew]

Sounds good to me! CORS is a monster that I have been battling for a lot of home projects. I wonder if the sites using it require login creds or special permissions to bypass it in an ajax call?

From: Mateo Nares Sent: Tuesday, October 22, 2019 9:36 AM To: whelandrew/URLShortener Cc: Andrew; Comment Subject: Re: [whelandrew/URLShortener] CORS policy issue when trying to accesstinyurl.com (#2)

Great, I'll try this when I get home, as I don't believe I'm allowed to do so while onsite here at Apple ;) I recall configuring routing headers using NGINX when I was working at Cisco on a micro services project, and CORS is certainly a familiar beast. Thank you. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[el-guero-mero]

If you had more time, would you be able to circumvent the CORS issue with a custom functionality, akin to this? https://codeburst.io/creating-custom-url-shortener-with-nodejs-de10bbbb89c7. I believe it would set you up better ;)

[whelandrew]

This works for my axios calls. I will have to look into making changes for the TinyURL part. I’ll send you an update ASAP

From: Mateo Nares Sent: Tuesday, October 22, 2019 9:41 AM To: whelandrew/URLShortener Cc: Andrew; Comment Subject: Re: [whelandrew/URLShortener] CORS policy issue when trying to accesstinyurl.com (#2)

If you had more time, would you be able to circumvent the CORS issue with a custom functionality, akin to this? https://codeburst.io/creating-custom-url-shortener-with-nodejs-de10bbbb89c7. I believe it would set you up better ;) — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[el-guero-mero]

The real meat of this task is the URL shortener, so if there is any way you can NOT specifically rely on a third party to do the shortening and reconciliation thereafter (which is why most times, a db is employed), that would really further your cause. I know this from feedback on previous dev candidates ;)

[whelandrew]

That encourages me to revisit some custom code that I had commented out. Thanks for letting me make these changes! I’ll send you new stuff soon.

From: Mateo Nares Sent: Tuesday, October 22, 2019 10:02 AM To: whelandrew/URLShortener Cc: Andrew; Comment Subject: Re: [whelandrew/URLShortener] CORS policy issue when trying to accesstinyurl.com (#2)

The real meat of this task is the URL shortener, so if there is any way you can NOT specifically rely on a third party to do the shortening and reconciliation thereafter (which is why most times, a db is employed), that would really further your cause. I know this from feedback on previous dev candidates ;) — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[whelandrew]

Okay! Here is the changed up product https://github.com/whelandrew/URLShortener

It has been a while since I’ve built my own server, so it took some steps to figure it all out. Fortunately, your link was a great deal of help. Following his instructions was a challenge as I’m on a windows machine and he an apple computer. But I’m pretty good at translating between the two and put it together.

You were right: all of the meat was in the api call I made to create a short url. I’ve done a pretty major housecleaning of my front-end code now that I don’t need to do all of the heavy lifting from there.

In the new version you will find a folder labeled “server” and you can run an npm install to get that processing correctly. I borrowed a lot of steps from Muhsin to get the server running. I was conflicted when creating the random key. I ended up using UrlShorten because I saw the warning in the programming test about using Hashs. My first setup was to create a random short url with Math.Random.

The final steps were to make the shortened URL a click-able link. I was unable to get this solved. I tried to create a cookie that would hold the original link but decided against it. As far as I understand, this was another server-side trick and I just could not wrap my mind around (I may be a little brain fried.)

I hope that I can still impress you with my abilities. I was able to build a lot of this in under a day. Let me know if you have more questions? This was a great challenge and has certainly endeared me back towards back-end work.

Thanks! Drew

From: Mateo Nares Sent: Tuesday, October 22, 2019 10:02 AM To: whelandrew/URLShortener Cc: Andrew; Comment Subject: Re: [whelandrew/URLShortener] CORS policy issue when trying to accesstinyurl.com (#2)

The real meat of this task is the URL shortener, so if there is any way you can NOT specifically rely on a third party to do the shortening and reconciliation thereafter (which is why most times, a db is employed), that would really further your cause. I know this from feedback on previous dev candidates ;) — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[whelandrew]

Okay! Last one! Lol

There was so much more that I wanted to do with this project… so I did! I removed a lot of the automated functions that I had downloaded and wrote in my own. I set up an api that will reroute when the new short url is created.

Anyway, that’s all! Thanks again for the challenge. Sorry that this last submission has come in so late. https://github.com/whelandrew/URLShortener

Thanks Andrew

From: Andrew Whelan Sent: Tuesday, October 22, 2019 5:06 PM To: whelandrew/URLShortener; whelandrew/URLShortener Cc: Comment Subject: RE: [whelandrew/URLShortener] CORS policy issue when trying toaccesstinyurl.com (#2)

Okay! Here is the changed up product https://github.com/whelandrew/URLShortener

It has been a while since I’ve built my own server, so it took some steps to figure it all out. Fortunately, your link was a great deal of help. Following his instructions was a challenge as I’m on a windows machine and he an apple computer. But I’m pretty good at translating between the two and put it together.

You were right: all of the meat was in the api call I made to create a short url. I’ve done a pretty major housecleaning of my front-end code now that I don’t need to do all of the heavy lifting from there.

In the new version you will find a folder labeled “server” and you can run an npm install to get that processing correctly. I borrowed a lot of steps from Muhsin to get the server running. I was conflicted when creating the random key. I ended up using UrlShorten because I saw the warning in the programming test about using Hashs. My first setup was to create a random short url with Math.Random.

The final steps were to make the shortened URL a click-able link. I was unable to get this solved. I tried to create a cookie that would hold the original link but decided against it. As far as I understand, this was another server-side trick and I just could not wrap my mind around (I may be a little brain fried.)

I hope that I can still impress you with my abilities. I was able to build a lot of this in under a day. Let me know if you have more questions? This was a great challenge and has certainly endeared me back towards back-end work.

Thanks! Drew

From: Mateo Nares Sent: Tuesday, October 22, 2019 10:02 AM To: whelandrew/URLShortener Cc: Andrew; Comment Subject: Re: [whelandrew/URLShortener] CORS policy issue when trying to accesstinyurl.com (#2)

The real meat of this task is the URL shortener, so if there is any way you can NOT specifically rely on a third party to do the shortening and reconciliation thereafter (which is why most times, a db is employed), that would really further your cause. I know this from feedback on previous dev candidates ;) — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[el-guero-mero]

Wonderful, thank you so much! It is very much appreciated that we were able to work together toward a solution ;) I'll check this out when I have some free time today.

[el-guero-mero]

Before I try to run this, I'm noticing mongoose and mongodb as dependencies, which is completely fine. Just want to make sure the readme lets User know what to do to initialize that, if need be. Is a new User just able to run "npm install", then "npm start", or are there other steps required?

[el-guero-mero]

For example, how is your localhost:7000/api/ set up? Because you're running on a Windows machine, but everyone reviewing (including me) is on a Mac, there may be some issues with getting things set up properly.

[whelandrew]

Okay! One last update to the readme https://github.com/whelandrew/URLShortener

From: Mateo Nares Sent: Wednesday, October 23, 2019 8:58 AM To: whelandrew/URLShortener Cc: Andrew; Comment Subject: Re: [whelandrew/URLShortener] CORS policy issue when trying to accesstinyurl.com (#2)

Wonderful, thank you so much! It is very much appreciated that we were able to work together toward a solution ;) I'll check this out when I have some free time today. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[whelandrew]

The local host was auto placed when I set up the node server. I don’t think the address should cause any issues between the two OSs

Sent from my iPhone

On Oct 23, 2019, at 9:51 AM, Mateo Nares notifications@github.com wrote:

 For example, how is your localhost:7000/api/ set up? Because you're running on a Windows machine, but everyone reviewing (including me) is on a Mac, there may be some issues with getting things set up properly.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[el-guero-mero]

These work! Thank you so much!