XMLHttpRequest fail on AWS Amplify for requesting HTML - ajax

I am trying to use Jquery's ajax method to request a document to load into my page on AWS amplify. I get a 403 error from Amplify, even though the script and requested document are hosted on the same site.
I tried this from the Chrome Developer console within my web page:
$.ajax({type:"GET", url : "/_status_normal.inc"}).done(r=>console.log(r));
Response:
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>K1EQ6385K38BZRWK</RequestId>
<HostId>rebHmO5sssss/pqNIomerEo/mVbCVliqu6sycTOXfc=</HostId>
</Error>
How do I make a simple XMLHTTPRequest using jQuery with AWS Amplify?

The '/' is wrong when requesting these local resources. The proper request is:
$.ajax({type:"GET", url : "_status_normal.inc"}).done(r=>console.log(r));
API Gateway is the AWS method of setting up HTTP GET/POST requests and disabling CORS.
https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-develop-routes.html

Related

API server block request from GuzzleHttp

I have 2 servers which are API server and Client server ....
Both server using Google Cloud server and I use Laravel framework to develop my system...
So, currently the problem is, it return 403 error when calling API (to API server) using GuzzleHttp (from Client Server).....
But after I change the user agent to curl/7.65.3, suddenly it is working fine...
But I want to know why??? Is there any other solution without changing the user-agent???
Thanks
What is your use method? If GET you can refer to:
GET Requests That Include a Body
If a viewer GET request includes a body, CloudFront returns an HTTP status code 403 (Forbidden) to the viewer.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html

POST request to AWS API Gateway access

I have a AWS Lambda function that is triggered via AWS API Gateway. When I test my function on Lambda it is working. When I send a POST request to the API url via ajax, I get a 502 bad gateway error.
XMLHttpRequest cannot load https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/prod/myLambdaFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'mywebsite.com' is therefore not allowed access. The response had HTTP status code 502.
Obviously this was a CORS issue, so I thought I could change the CORS settings in my AWS API Gateway URL which I did, but I am still getting an error for this.
What do I have to change on AWS side or my own to be able to POST to the URL?
Unfortunately there is a known issue with many classes of 4xx and 5xx errors where CORS headers will not be sent, even if you've added CORS support via the console.
As noted in comments, the CORS error is a side effect of the fact that your API is returning a 502. This often occurs if you are using the LAMBDA_PROXY integration type and are returning invalid JSON from your Lambda function.
Please try either using the test invoke functionality from the console or enable logging in your API to debug further.
I solved that exact same problem by outputting the CORS header myself.
See below - and I hope that'll help.
Teebo
Amazon docs
function respond(context, responseData) {
var response = {
statusCode: 200,
body: JSON.stringify(responseData),
headers: {
"Content-Type": "application/json; charset=utf-8",
"Access-Control-Allow-Origin": "*"
}
};
context.succeed(response); }

WSO2 API console requested an insecure XMLHttpRequest endpoint

Am using WSO2 API Manager 1.9.1 and have defined a service that can be access over both http and https. When I try to "test" it through the API Console under https://localhost:9443/store/apis/..., the API call fails as the REST AJAX call is send over http instead of https.
Chrome complains that the page was loaded over HTTPS but requested an insecure XMLHttpRequest. The request is blocked as it should be served over HTTPS.
Firefox likewise blocks the request with a "mixed active content" error.
Safari fails with a more obscure message: "Failed to load resource: The network connection was lost.".
A workaround is to set the API scheme to https only but this is not particularly desirable. Is there a fix or other way to cope with this issue?
This issue occurs when you're trying to access a HTTPS URL from the web browser
but the end point is actually HTTP. This is not the default behavior of swagger console in API manager 1.9.
Usually when you are accessing from the web browser using HTTPS, API console
(swagger console) calls an end point of HTTPS by default.
Try to expose the service as both HTTP and HTTPS(Manage Tab) when you are publishing an API.
Thanks
Ojith

getting google's openid configuration Discovery document yields to cors errors

I am trying to access the google discovery document through angular $http service, but I receive cors errors. https://accounts.google.com/.well-known/openid-configuration
here is the error:
MLHttpRequest cannot load https://accounts.google.com/.well-known/openid-configuration. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1485' is therefore not allowed access.
I know it has to do with CORS, and I wanted to get the authorization endpoint in my angular service from that document after loading it. If I don't load the document and directly hardcode the authorization_endpoint (https://accounts.google.com/o/oauth2/auth) everything is working, but I wanted to create a service that could be configured from the discovery endpoint.
My Question is :
Does anyone succeeded in loading the google openId discovery document from ajax requests ? (from the angular $http service ?)
regards

URL not allowed by Access-Control-Allow-Origin

I am trying to implement OAUTH for accessing Flickr APIs. My AJAX call to flickr.com keeps failing.
Sample Error Message:
XMLHttpRequest cannot load http://www.flickr.com/services/oauth /request_token?oauth_callback=oob&oauth…signature_method=HMAC-SHA1&oauth_timestamp=1368375405647&oauth_version=1.0. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
Initially I used chrome and read the html file as file://path. I used to get the error 'null not allowed by access-control-allow-origin'. I solved this problem by copying the html file to 'local IIS server', 'local python webserver' and then a 'remote webserver'. I created python web server using > python -m http.server 8080'
I realize my cross browser call to flickr.com using XMLHttpRequest is failing. I tried by various solutions suggested in this forum:
Using newer Chrome 26.0.1410.64 m, which I guess supports CORS
I launched chrome with --disable-web-security
I created a web server using python -m http.server 8080 on local machine and then on a remote machine and copied the html file to the site
I copied file to a local MSFT IIS server
I defined URL in etc/hosts file to avoid numeric IP
I still get the same error (with relevant URL in the error message)
code clipping:
urlString="http://www.flickr.com/services/oauth/request_token?"+
"oauth_callback="+"oob"+'&'+
"oauth_consumer_key="+consumerKey+'&'+
"oauth_nonce="+nonce+'&'+
"oauth_signature="+esignature+'&'+
"oauth_signature_method="+macAlgorithm+'&'+
"oauth_timestamp="+timeStamp+'&'+
"oauth_version=1.0";
$.ajax({
url: urlString,
success:function(data){
alert(data);
}
});
In order to CORS work, both ends must enable it.
The first end is the browser, and, as you are using Chrome 26.*, yours is ok.
The second end is the server:
Before making a GET request to a domain different than the one the page is on, the browser sends an OPTIONS request to that domain. In response to this request, the server should include some headers that tell if a cross-domain request (GET, POST or other) is allowed.
One of those headers is Access-Control-Allow-Origin.
So when you run your page from your file system (file:// "protocol"), the OPTIONS means something like "Flickr, can I make a cross-domain call to you? I'm calling from null". Flickr does not recognize that domain as allowed and returns the error you are getting.
Same way, when you run your page from your local server, the OPTIONS says "(...) I'm calling from localhost:8080". Flickr does not recognize that domain as allowed as well.
The solution:
I don't know the Flickr oauth service, but I know that, as any other service, to make a CORS call to it, the page must be in a domain allowed by it. From your tests, I'm guessing Flickr does't allow many other domains.
But... an alternative to CORS is JSONP. I did a little research, Flickr oauth seems to support it.
Check this page for details: http://www.flickr.com/services/api/explore/flickr.auth.oauth.getAccessToken
There's another question talking about that specific subject:
Is JSONP supported in the new Flickr OAuth API?
About JSONP, this can get you started: How to make a JSONP request from Javascript without JQuery?
It is not possible to implement Oauth 1.0 through just javascript without any server side script. Since the flickr's new authentication process is based on Oauth 1.0a. You got to use a server-side script.
I tried to send the token request using JSONP in FireFox with CORS on(using a third-party add-on) and it worked fine. But without using any add-ons, it's not possible as the response from flickr is in text format(not in a JSON format) and the request fails.
You can either use server-side code for token request. OR Use the deprecated flickr API for authentication.

Resources