We have two applications deployed to PCF:
A Spring Boot REST Backend on a route e.g. backend.route1.net deployed with java_buildpack_offline
We also have our React Frontend on the same instance on a route e.g. frontend.route1.net pushed with a Staticfile with a single line content of: pushstate: enabled
Both works separately, which we can confirm by accessing the endpoints on both directly, for which they clearly return the expected values, hence they are both working well.
However, as soon as we try to access a page on the Frontend that needs to talk to the Backend using Axios we get a ERR_CERT_COMMON_NAME_INVALID
The generic things I find on Google or in PCF Documentation don't seem to be helping. Any tips where should I continue looking or what the actual issue could be?
If you need further info please ask.
Thanks!
/András
Related
I'm asking for some help, maybe I'm missunderstanding some concepts and finally I dont know how to solve this requirement:
I have a create-react-app application deployed using Netlify.
Also my backend is deployed on AWS ECS.
I'm using AWS route 53 for routing frontend and backend to myapp.mydomain.com and api.mydomain.com respectively.
A client has a specific network config so only *.mydomain.com requests are allowed for his organization.
The problem resides on frontend because it uses many libraries, for example:
Checking network tab on browser I noticed thw following:
I'm using a giphy library, so it makes requests to api.giphy.com.
I'm using some google stuff like analytics and fonts, so I assume it will make requests to some google domain.
And so on...
As I understand this kind of fetches will be blocked by client network "firewall".
Adding more rules to said firewall is not an option (That was my first proposal to client but they only allows *.mydomain.com and no more)
So my plan B was implement a proxy ... but I dont have any idea of how to implement such solution.
It's possible to "catch" third party fetches, redirect them to my backend like api.mydomain.com/forward, so my backend would make real fetch and returns response given by said fetch to frontend?
The result desired should be, for example again, all fetches made to api.giphy.com should be redirected to api.mydomain.com/forward/giphy and same for all third-party fetches
I Googled a lot and now I'm very confused, any help is welcome!! Thanks devs!
please help me with the following problem as it already taken me so much time to figure out:
I have an API which I created using PHP and hosted with AWS EC2.
This API is to be consumed by a React frontend app I made, and when I am developing the frontend there are no problems sending and receiving data from the API.
However, after I deploy the app using AWS Amplify, the app loads correctly but fails to connect to the api(i.e. not showing fetched data, unable to post forms)
I read a little bit about proxying but I am not sure it is the solution and if so, how would I implement it.
Thanks a lot in advance.
I resolved the issue.
My problem was that the server was not listening to https port, so the browser blocked the content.
I'm deploying a side-project at the moment that I've built on React+Nodejs.
I deployed the React part using Vercel, what a great service. I then deployed my Node backend to AWS ECS that is currently active and accessible.
The problem is, Vercel configures HTTPS by default so I need to enable HTTPS on my backend as well to allow for communication. Otherwise, I get a "Blocked mixed content" error on the frontend.
I've tried obtaining a certificate from ACM but Vercel has it so that I can't add a CAA record for Amazon (it removes the "." at the end). I currently have a support ticket with Vercel to try and resolve this.
If there's an alternate way to resolve this issue, or if I'm not even on the right track, let me know. Thanks.
Edit: This is the page I followed for ACM: https://docs.aws.amazon.com/acm/latest/userguide/setup-caa.html
The trailing dot is actually not required. As you can see here, Vercel is also using multiple CAA record without any issues. You can search for more examples online.
I am developing a React project for studies and would like to publish.
I tried some ways, but the site is blank, there is no data from the NEWS-API I am using.
It seems to make no mistake.
It is a front application, only react with the API.
If it helps, here's the repository link.
https://github.com/carlos-souza-dev/apinews
I visited your deployment in vercel from your github repo and noticed this issue.
You're requesting data from the API over http which is insecure, while your page hosted by vercel uses https.
Modern browsers donot allow for a page served over https to request http data.
It might just be a fixed by changing your urls to use https, or if the API didn't have https you might have to do other workarounds.(Although it's better to use an API with https support)
I noticed this by opening the console after visiting your page to see these Mixed content requests blocked error.
The reason for the blank page after loading is that the Promise to get the data from the API get rejected but never handled causing the JavaScript execution to stop
[EDIT 1]
I read through some of the code in your repository and noticed a link pointing to localhost. It looks like you tried to setup a nodejs server to proxy data through https
The API you're using does seem to have HTTPS support
Conclusion:
Try changing the links to the API to https instead of http in your react code and see if it works. If it does, there's no need for a backend server of you're own
If the API doesn't have HTTPS support however, do either one of
Migrate to a different API with HTTPS support
Try serving your static react app through the backend and pointing your react app to /path/to/api/route without an absolute url and use the proxy setting in package.json as said here for development
Point to a full path to your backend server on the internet (i.e remove localhost links)
Also note that you cannot deploy a backend to vercel but it does support serverless functions
I've used pretty much all tutorials on google, seen all github repos. Spent weeks. I'm trying to make an app with a Spring Boot backend with spring Security JWT and React frontend (I don't know if I need webpack for this, some tutorials used it for another level of proxy for some reason, some didn't). I just want to start with something. Something which can be accessed via one port on localhost, which reloads and not gives me 403 unauthorised error instead or even worse, a blank page when I just want to see login page or a page from the menu after authorisation. A Hello World. A Time On Server starter project. Anything. Just so that it reloads and I can build stuff with sense on top of it. Can you please tell where I can find snything?