CORS Policy Blocked

1

Completely stumped by this. I am doing all of the API Microservice Projects as one project.

The app has no issue passing tests for the Exercise Tracker, Request Header Parser and the Timestamp Microservice but for some reason the Url Shortener tests fail due to a CORS Policy error when submitting despite manual tests of the app showing that the app ultimately functions perfectly.

The error thrown is the following and there are also extra error messages which I will also show but my suspicion is that these are just a result of this CORS error:

Access to fetch at ‘https://aidan-sabin-portfolio.herokuapp.com/api/shorturl’ from origin ‘https://www.freecodecamp.org’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Failed to load resource: net::ERR_FAILED (shows it is the /api/shorturl path for my app)

frame-runner.js:98 TypeError: Failed to fetch
_callee$ @ frame-runner.js:98

If you attempt to submit on the URL Shortener project page on FCC it crashes the whole app so testing it yourself will only work for the first person (if you try to see the errors for yourself) but I will restart the dynos in the hope the first person manages to solve it for me :stuck_out_tongue:

Might be worth mentioning I also tried to add origin: ‘https://freecodecamp.org’ to app.use(cors) but this did not help.

Heroku app: https://aidan-sabin-portfolio.herokuapp.com/
Github Repo: https://github.com/aidansabin/aidan-sabin-portfolio-web-app

2

Hey there,

One thing, I note that the URL-Shortener is not working:

image
image838×523 22.3 KB

So, the CORS error could be because your app is crashing during the tests - not an issue with CORS, but something else.

Also, Are you submitting this link?
https://aidan-sabin-portfolio.herokuapp.com/url-shortener

Just while I was going over your code, this will not pass the tests:

if (/\/$/.test(url)) {
    url = url.replace(/\/$/, "");
  }
  if (/^(https:\/\/(?!www.)|http:\/\/(?!www.))/.test(url)) {
    url = url.replace(/^(https:\/\/|http:\/\/)/, "www.");
  } else if (/^(https:\/\/(?=www.)|http:\/\/(?=www.))/.test(url)) {
    url = url.replace(/^(https:\/\/www.|http:\/\/www.)/, "www.");
  }

The first argument of dns.lookup is expected to be a hostname only.

Hope this helps.

3

I have set it now so that the hostname would just be in the format freecodecamp.org (have removed the “www.” from the front. This hasn’t solved the issue so maybe I’m unsure what ‘hostname’ really means or it isn’t this part that is breaking the app. Honestly tried about 1000 different solutions at this point and nothing seems to work.

4

The hostname is what you have used as an example:

https://www.freecodecamp.org/learn/some-other-route/
            |   hostname   |

None of the other stuff should be a part of the argument. I think you are making it a bit too complicated. So, I encourage you to:

  1. Write a small function that gets the hostname
  2. Write a few examples to test (think of simple ones, and crazy ones (P.S. look at the network requests made when submitting your app…))
  3. Test your small function with the examples
  4. Log everywhere you need to, to see where your app logic is struggling.

Hope this helps

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.