I have developed an MERN Application so we have ReactJS as frontend and backend as NodeJS. The Application is working on Heroku server.
But now i am scaling things up and I have moved to AWS. I have deployed the frontend in S3 and using it as Static Web Hosting. I have deployed backend in EC2 instance and it is running on NGINX.
We have few resources required such as Camera to be accessed from the browser so I have added SSL certificates on both ends. In EC2 I have used loadbalancer to add SSL certificate.
Now the issue is when ever i make an API call from frontend to backend i am getting GATEWAY TIMEOUT 504 exception.
Frontend : https://portal.visitplan.in
Backend: https://api.visitplan.in
Can you help us out in resolving this? or is this the right way to deploy the application? Is there any other way?
Ok, first of all, your certificate is invalid, you might wanna check on that.
I might know what is happen even thought you are not providing any code.
You might have deployed the frontend and the backend but you might have forgotten to change the request, however, the only request I can make from the portal is the login and this is the console response:
Access to XMLHttpRequest at 'https://api.visitplan.in/account/login' from origin 'https://portal.visitplan.in' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
You need to add the header Access-Control-Allow-Originas stated here. CORS header 'Access-Control-Allow-Origin' missing
One of those reasons might be the problem.
Related
I have setup and application which uses a React front-end and Expres/NodeJS back-end. There is an ALB in the mix as well.
So, here is how the flow goes:
The ALB listens on port 443 and there is an Authentication action attached to the listener. This action uses and Amazon Cognito user pool, scope is openid. Once the authentication is successful the ALB redirects the request to the React app which in it's turn sends http requests back to the ALB which redirects them to the Express app on the server-side. I have setup the communication between FE and BE like this because we use Amazon ECS and I don't have a static DNS or IP except for the ALB.
I am unable to get the x-amzn-oidc-data header when console logging the req.headers. This header is important to me because I'd like to verify and work with the JWT that it contains.
I have read most of the docs on the Internet and they say that the ALB automatically sends this header (and couple of others) to the back-end. However, I only see one x-amzn-trace-id which has nothing to do with the JWT issued by Cognito.
Where do you think is my error? My setup seems pretty standard to me - how could I get that header?
Thanks in advance!
i am new to AWS, i deployed a MERN application in it as follows:
front end on S3 bucket with web hosting enabled;
backend (node, express and graphql) on an ELB;
these two apps are put behind a cloudfront distribution as origins.
the app works fine but a cookie that i am setting is not received by the browser:
the other thing that is bothering me is that the access-control-allow-origin header is set to * although i have the cors policy set in my app to my particular domain.
the cookies are set in development but once i push the code to the server it does not work.
any help is much appreciated.
I made it work but i am not sure what i exactly did. the thing here is that cloud front doesn't not forward the set-cookie if you don't tell it to do so.
I just needed to update the Cache key and origin requests options that you find when you try to update a behavior like this :
I am trying to communicate with an app that is hidden behind an Azure Web Proxy/Active Directory setup.
I have tried the following so far:
Written an app in Ionic (Angular)
Set up Ionic's AuthConnect plugin so I am able to get hold of an access token from AD
Set the access token in an 'Authorization' header which this link appears to suggest
Send POST requests which works fine with any other API, just not the one behind the Web Proxy
Tried to set up IIS CORS module on the server-side. I have attached an image of the current config below.
When I try to send a POST request to the Web Proxy app URL, I get a 403 forbidden error on the preflight request.
I'm getting the error "Access to XMLHttpRequest at 'https://www.testurl.com/test' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Is anyone able to point me in the right direction please? Any help would be greatly appreciated.
You might be facing CORS (Cross-Origin Resource Sharing) issues. You should try turning off CORS in whichever browser you are using. Also, as the error statement says, “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”, you should check the domain or site from where you are sending a POST request to your web proxy app url and whether CORS is disabled/bypassed for your web proxy resource or not. Try sending a POST request from your domain only, not from outside or another domain with CORS enabled.
Also, might be you are sending a POST request from a ‘http’ web server which doesn’t has an SSL certificate installed, so try installing an SSL certificate on your local host and then send a POST request.
You can also check the app virtual directory permissions for web proxy resource access and correct accessibility as you have received a forbidden 403 error while accessing the web app page.
Please refer below threads for more clarification on your issue: -
Response to preflight request doesn't pass access control check
Access to XMLHttpRequest has been blocked by CORS policy
How does Access-Control-Allow-Origin header work?
Thanking you,
I have a nodeJS express app, that serves front end app using React and also provides an API. The React app calls the backend API and as such there is no cross origin.
When I deploy this to Bluemix without SSO, everything works fine. When I deploy using SSO service I get error
Fetch API cannot load https://abcd-9bgrvudk1p-ct20.iam.ibmcloud.com/idaas/oidc/endpoint/default/authorize?response_type=code&client_id=Z4eSiL50dT&redirect_uri=https%3A%2F%2Fconsole-sso.mybluemix.net%2Fauth%2Fsso%2Fcallback&scope=openid%20openid.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://console-sso.mybluemix.net' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I tried calling the API directly and after SSO auth, it works fine, But when the API is invoked by the front end app, it returns the above error.
FYI, API target is https://console-sso.mybluemix.net/api/reports/daily-reports
I have followed the Single Sign On documentation
I tried adding CORS module and response headers to allow a CORS request but it did not work. I also tried adding * to SSO configuration to allow all origins but no luck. Any pointers would be great! Thanks
This will require Support to review. Please open a ticket with the BlueMix support team
Hi I am calling an Azure Application Proxy endpoint (myapp.msappproxy.net) through the browser and am running into a CORs issue. How/where can I configure CORs for the Azure Application Proxy endpoint? I've looked in both the old and new Azure portals.
The error I'm getting is on the OPTIONS preflight request.
XMLHttpRequest cannot load https://myapp.msappproxy.net. Response for
preflight is invalid (redirect)
I realize that you set the access-control headers on the API endpoint, in this case the App Proxy, but I can not find where to do so. Additionally, I must set a custom header in my request, because am using bearer token authentication.
Thanks!
Just had the same issue. I have an Azure Application Proxy. So an internal page is available for externals. But normally the Application Body is set to No. With that setting browsers having huge CORS errors. To fix these CORS problems you have to set the Application Body to Yes. Now the body is correctly set and all browsers are able to show the website without CORS issues.
Also good hints you can find in the Enable link translation section.