I am setting up a flask-dance + flask-login project and am having issues with CORS. Specifically, I follow the standard flask-dance setup for Google OAuth:
google_blueprint = make_google_blueprint(
client_id=constants.GOOGLE_CLIENT_ID,
client_secret=constants.GOOGLE_CLIENT_SECRET,
scope=["profile", "email"]
)
app.register_blueprint(google_blueprint, url_prefix="/b/google_login")
On the frontend, I make a GET request to {backend}::/b/google_login/google, but get the following error:
Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=xxx&redirect_uri=http%3A%2F%2Flocalhost%3A5001%2Fb%2Fgoogle_login%2Fgoogle%2Fauthorized&scope=profile+email&state=xxx' (redirected from 'http://localhost:5001/b/google_login/google')
from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have added the redirect URI (i.e. /b/google_login/google/authorized to the redirect-URI whitelist). I am confused why this error is happening - as I am proxying the OAuth redirect through my server.
When I attempt the flow through window.href = http://localhost:5001/b/google_login/google - the flow works without issue.
Anyone have any idea why this is happening?
Related
I know this is a known problem but it seems new version v5.11.0 brings another problem related to CORS.
According to this documentation, you just need to configure CORS behavior to make call from application out of I.S. domain.
I did this configuration, but it doesn't work. When I call endpoint /oauth2/oidcdiscovery/.well-known/openid-configuration, I get following error:
Access to XMLHttpRequest at 'https://xxxx:9443/oauth2/oidcdiscovery/.well-known/openid-configuration' from origin 'http://localhost:4200' 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.
Does anybody facing same problem?
Thanks,
You need to follow this cors configuration given in this doc. From 5.11 onwards, IS has changed the cors configuration model. Check the new changes done for 5.11 here. So the configuration mentioned in this documentation
is no longer valid
I was trying to use my api and I have a function on ember app to login but when the login action is trigerred I receive a message below. What is the reason I am receiving this error?
login:1 Access to fetch at 'https://app-dev.some-url.com.au/api/login' from origin
'http://localhost:4099' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch
the resource with CORS disabled.
Your API server isn’t configured to accept requests that come from a web application on another origin. Some options:
Configure your API to serve the Access-Control-Allow-Origin header
on the OPTIONS request that the browser makes to test this. It
could be Access-Control-Allow-Origin: * if you’re lazy or can’t
know in advance what origins people will be coming from. It’s hard
to be more specific about this without knowing details of your API.
Use Ember CLI’s API
proxying
feature to bypass the need for CORS. This is for development mode
only, though. You’d need a similar solution in production where
Ember CLI’s development server isn’t present.
I'm almost complete with a new web app, however, I'm getting a 403 error from AWS's API Gateway due to a CORs issue.
I'm creating a Vue app and using Vue's axios library. CORs is enabled and the request works with API Key Required option turned off in AWS's API Gateway by sending the following:
axios
.get('My-URL-Endpoint',{headers: {})
.then(response => (this.passports = response.data ));
When I turn on API Key Required functionality inside AWS's API Gateway. It works when I use Postman along with including x-api-key: My-API-Key. However, using Vue's axios it does not work and returns error 403:
axios
.get('My-URL-Endpoint', {headers: {
'x-api-key': 'My-API-Key'
}})
.then(response => (this.passports = response.data ));
My first instinct is that the problem is related to how Axios is sending the request through the browser. From what I can gather it looks like the pre-flight check is failing because I am receiving the following error within the browser:
Access to XMLHttpRequest at 'My-URL' from origin 'http://localhost:8080' 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.
Sure enough it looks like there is no access-control-allow-origin key in the response. So I added access-control-allow-origin to the response of the 403 message and got a new error "It does not have HTTP ok status"
I've been trying nearly everything to get this to work! I came across stackoverflow answer where it seems like the person was suggesting that API Key Required Key functionality can't work with CORs. This kind of seemed like that cannot be true. It would be a pretty crippling restriction.
So my question is how to get the browser's pre-flight check to work along with CORs and API Key capability inside AWS's API Gateway?
Thank you!
If you have enabled cors on your api gateway, the next place to look is the application code such as lambda. Make sure the Lambda is returning the correct cross origin headers in both successful and failure scenarios.
First of all you can check if the request is reaching the lambda from the cloud watch logs. Another way to check this is to temporarily point the Api gateway target to the Mock end point.
If the mock endpoint works, then the problem is the application code. otherwise the problem is in your api gateway end point.
Also note that any headers you use should be white listed in the Access-Control-Allow-headers section when you enable to cors for your method/resource.
I am working on angular fronted project and using angular7 project.
I am using aws api as backend. Whenever I call the aws api its giving me
following errors.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxxxxx.execute-api.us-east-1.amazonaws.com/XXX/subscriptionpayment. (Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxxxxx.execute-api.us-east-1.amazonaws.com/XXX/subscriptionpayment. (Reason: CORS request did not succeed).
I am using following code
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin':'*'
})
};
let makePaymentUrl = "https://xxxxx.execute-api.us-east-1.amazonaws.com/xxxx/subscriptionpayment";
return this.http.post(makePaymentUrl, params,httpOptions);
You need to enable CORS in the API gateway end point.
Follow : https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html#how-to-cors-console
Where are you calling this request? if its a localhost maybe aws doesnt allow access to it. Check your API keys for this services
or double check your headers
try this
I am writing a rails backend app. I am providing a rest api to the frontend developer who is workng separately. So for time being I have enabled Cross origin resource sharing by adding following in my application.rb:
#todo remove this once ui is integrated into the app. following allows requests from other domains (disble CORS).
config.action_dispatch.default_headers.merge!({
'Access-Control-Allow-Origin' => '*',
'Access-Control-Request-Method' => '*'
});
I am trying to test out the api by using links on a simple HTML page which I am running off of the python SimplHttpServer. The page is being served at http: // localhost:8000/TestPage.html
When I test one of the links (it sends an ajax request using jquery to the backend which at the moment is running locally as well, on http: // localhost : 3000), I get following error:
GET http://localhost:3000/campaigns/my_campaigns?user_email=swapna%40urbancoding.net&user_token=SNa2kPqkm5ENsZMx7yEi
XMLHttpRequest cannot load http://localhost:3000/campaigns/my_campaigns?user_email=xyz.xyz.com&user_token=xyz. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost : 8000' is therefore not allowed access. The response had HTTP status code 500.
What is going on? How can I resolve this?
Turns out the issue was that the url I was sending the request to (http:// localhost:3000/campaigns/my_campaigns) was incorrect. It was matching an action I did not intend it to match. This action was triggering a 'missing template' exception. Somehow this was causing the No 'Access-Control-Allow-Origin' error. Not sure how that happens, but once I fixed my url to go to the intended action, all was well.