DEV Community

Suulola Oluwaseyi
Suulola Oluwaseyi

Posted on

Using Netify Redirect

Recently, I had two annoying errors which I had to deal with on Netlify and the "_redirects" file solved both for me.

The first issue I encountered was

CORS

CORS

Access to fetch at blocked by cors policy no 'access-control-allow-origin' header is present

The Almighty CORS issues - The annoying thing about CORS for me is the fact that I test all the APIs on Postman, tell the backend developer it's working - only for me to start the integration and viola - nothing works because of CORS.

The normal approach will be to tell the backend developer to make the necessary adjustment - but in my case, this was a public API I have no control over.

  • My first solution was to use https://cors-anywhere.herokuapp.com/corsdemo. Works fine in production but highly restricted on production.

  • The second solution that came to mind was to write a quick API - call the endpoint in my API which then serves my front-end. That's a longer but secure route which I unfortunately didn't implement.

  • The third solution was using redirects which is what I used eventually

Here are the steps using React

  1. Create a _redirects file in your public directory. i.e your_project_folder/public/_redirects
  2. Using the format below, redirect to the endpoint
/api/fetchCorsEndpointData https://corsendpoint.com/data 200
Enter fullscreen mode Exit fullscreen mode

Now anytime you want to fetch data from https://corsendpoint.com/data, make an api call to https://yoursubdomain.netlify.app/api/fetchCorsEndpointData and viola - you get your data.

The second issue was

Mixed Content

Mixed Content: The page at was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.

The public API I was accessing was deployed on HTTP and not HTTPS - using the method specified above, I was able to access resources on the endpoint on Netlify. Specify in your _redirects file

/api/unsecureRoute http://unsecureendpoint.com/data 200
Enter fullscreen mode Exit fullscreen mode

In your codebase, simply call https://yoursubdomain.netlify.app/api/unsecureRoute and it will fetch the resource on http://unsecureendpoint.com/data

BONUS

The third use case for me is

Page Refresh

Page Not Found

Looks like you've followed a broken link or entered a url that doesn't exist on this site.

I get "Page Not Found" on refresh of a page on Netlify - the fix for me was to add the snippet below as the last line in my _redirects file

/* /index.html 200
Enter fullscreen mode Exit fullscreen mode

I hope this helped fix whatever issue you have when deploying your React App on Netlify - let me know your thought in the comment section.

Viola✨✨✨✨

Top comments (2)

Collapse
 
williycole profile image
William Cole Boren

Would you mind posting a link to the git repo that you addressed this with? I am having a hard time addressing this on a project and I have tried and looked at a lot of resources to address this.

Collapse
 
suulola profile image
Suulola Oluwaseyi

Hello William, sorry i am just seeing this question. Trust you've been able to solve this or is my help still needed.