Serve React app and backend server from same domain - reactjs

I have a react app serving from "https://www.domain1.com" and the backend is served on a different domain "https://www.domain2.com". Api requests made from domain1.com to domain2.com are not simple HTTP requests since we are adding an Authorization header in all the requests. This leads to CORS OPTIONS request being made further increasing the latency of the app by a heavy margin.
1. Is there any way I can merge the 2 domains ?
2. Can I avoid CORS OPTIONS preflight requests for these non-simple HTTP requests if I keep the domains separate ?

Yes, you can avoid CORS Policy option in your backend side not in your frontend. Where the API is developed, CORS Policy must be allowed there. After allowing you can call API which is serving from other domain.

Related

How to proxy https requests to an http api

So basically I have an http Api and I can't change it to https for business reasons
and an https client that needs to stay https for the payment gateway integration and authentication
the api calls fall down due to CORS and mixed origin, I thought of two solutions
one: proxy the api calls from the client so the client will be https but the api would read its coming from http, not sure if its doable or how can I do it and need help with it
two: wrap the backend with an https api but I think that might slow the web app
which would be better ? if one, how to implement it

What further steps do I need to allow my static site hosted on s3 to make https requests to my server on elastic beanstalk?

My current stack is pretty simple:
Backend: Django 2.1.1, python 3.6 I am running it on elastic beanstalk with an application load balancer. I have port 80 listening for HTTP and port 443 listenin for HTTPS with my ssl certificate selected. I did not select an SSL policy as I have no idea what these do.
Frontend: React, mainly using axios to do requests (axios.get, axios.put, etc). I have this hosted on two s3 buckets, mainsite.com, where all my static files are, and www.mainsite.com, which redirects HTTP to that site. I also have 2 cloudfront distributions which redirect HTTP to HTTPs, using the same certificate as the one I used for my load balancer. I then created 2 record sets and set the alias to the cloud distribution. When I try to do any request, I see in the console:
xhr.js:173 Mixed Content:
The page at 'https://fakesite.net/login'
was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://myenv-env.randomletters.us-east-1.elasticbeanstalk.com/rest-auth/login/'.
This request has been blocked; the content must be served over HTTPS.
What else do I need to configure? Do I need to change code, or is it all aws related.

PassportJS Facebook Strategy, nodejs & angular running on diffrent servers

probleme when calling nodejs(localhost:3000)passport facebook stratrgy authentification from "another server" angular(localhost:8080).
XMLHttpRequest cannot load https:/www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…%2Flocalhost%3A3000%2Fauth%2Ffacebook%2Fcallback&client_id=154021398315208. Redirect from 'https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…%2Flocalhost%3A3000%2Fauth%2Ffacebook%2Fcallback&client_id=154021398315208' to 'https://www.facebook.com/login.php?skip_api_login=1&api_key=154021398315208…_&display=page&locale=en_US&logger_id=91549505-c21b-1176-243b-5cc5e73a788a' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
This could be a couple of issues.
In your Facebook App settings you may have to authorize localhost as a valid App Domain.
Secondly, since your requests are cross domain you may have to tweak web security while in localhost.
The browser is blocking these requests since you are on one website, but calling API's on another. This is a simple way hackers hack your users so most browsers block it. Here's a quick tutorial on CORS.

Angular doesn't send cookies on CORS

I have an App Engine server hosting an AngularJS application that makes CORS requests to some Cloud Endpoints APIs on another App Engine server. As per the $http service documentation I have enabled it to send credentials in cross-domain requests by settinga default header:
$httpProvider.defaults.withCredentials = true;
The front-end server has an associated custom domain with SSL support, and makes requests via HTTPS (so that both the ends are basically HTTPS).
My goal is sending an authentication cookie to the backend in order to manage resource access authorization, but for some reason this cookie never gets sent.
I do see the cookie in the request when the two servers are running locally (frontend: http://localhost:8081, backend: http://localhost:8080), but not when they're deployed.
What am I missing there?
angular http Documetation i follwed
Try adding this header to your HTTP calls {'Content-Type': 'application/x-www-form-urlencoded'}
If I understand correctly, you want to send an authorization cookie over CORS to a different (sub)domain?
To do this, you need to permit CORS requests on the initial page load, use 'withCredentials' as you have detailed as well as have a cookie for the targeted cross domain call. If it's cross domain, you'll have to write the cookie in js code, if it's a sibling subdomain make sure the cookie domain starts with a dot .domain.com, and the cookie will then be shared across all subdomains of the domain.
Localhost can play havoc with this kind of testing because the domain relationships are different (i.e. Not sibling subdomains) - you can try using a local proxy to set up a scenario which maps subdomains to a loop back address.

How to persist authenticated state in a sailsJS backend app when requests are from another domain?

I have an architecture where I'm using sailsJS (custom node.js implementation) as my api server and an angular front end server. Each app is being served from different domains.
How can I maintain an authenticated session in the sailsJS api app between requests?
Sails has an integrated req.session object for maintaining sessions but it doesn't seem to be working out of the box when the client is being served from another domain.
You need to check two things when doing cross-origin requests from your front-end app to your Sails app:
Make sure your Sails app has CORS enabled; this will ensure that the browser doesn't block the requests for security reasons
Make sure the withCredentials flag is set in your AJAX request; this will ensure that your cookie is sent to Sails and your session is maintained.
With Restangular, you can set withCredentials to be used on all requests by default using setDefaultHttpFields; see this answer for details.

Resources