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.
Related
I hope you people are doing well. I have the CORS error in my AWS API gateway. I have some backend services that locate in the EKS cluster. I made one VPC link with my internal NLB. I have some Swagger definitions for my backend services, I import them in my AWS API gateway and enable the cors for all my endpoints. So, it's working fine and I can easily access my backend resources without any cors issues in postman. but when the same API I try to connect with my frontend react application, it gives the CORS error. I got a positive prelight response with code 200. Below is the error I got while accessing the resource.
Access to fetch at
'https://5yl423946k5.execute-api.ap-south-1.amazonaws.com/mobile-api/getAvailableSubscriptions'
from origin
'http://a40ee71e46345234aa068fabdfbbbfc8-658183s33c9cd7f2.elb.ap-south-1.amazonaws.com'
has been blocked by CORS policy: Request header field
access-control-allow-origin is not allowed by
Access-Control-Allow-Headers in preflight response.
If you need some extra information please feel free to ask :)
I am facing problem when I call an api end point url from a https page. I have hosted my front-end code in aws s3 bucket and a third party ssl certificate is deployed .so my react code is served over https. And my back-end is deployed inside a single instance application of elastic bean stalk. while I am trying to call my back-end url from my front-end application, it is throwing the below error.
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.
Can anyone help me to resolve this issue.
Thanks.
You need to setup your ELB (AWS Elastic Beanstalk) application to use SSL/HTTPS
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https.html
You can set this up with Route53 and AWS Certificate Manager (ACM).
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.
I am having a bit of a problem here.
I have Keycloak where I have enabled CORS (value '*') and I can call endpoint:
/auth/realms/master/protocol/openid-connect/token
from Postman, where I get response with access token and other stuff, but when I try to call that endpoint from my React application, I get CORS error:
I don't get why, since I have set '*' value for Web Origins in that client.
Is this a Keycloak bug, or am I missing something trivial?
Do you have the address 'http://localhost:3000/*' added on the Valid Redirect URIs keycloak config?
I have fixed this issue by creating Web API project in .NET Core (this could be done in any other technology). I have setted CORS policy in my project to allow any domains and then I make direct calls to Keycloak endpoints from .NET Core project. Besides fixing this issue (since .NET Core Web API project is not a browser application, this is working like a charm), this adds another security layer to the Keycloak by hidding client information that is only accessible from .NET Core application. Information like client_id and client_secret are not visible from browser application and no one can do any damage to my clients in Keycloak.
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.