web api is hosted on secure server and i am accessing it through a path locally it is working fine. but after hosting an api
I am Getting this error while running an application
XMLHttpRequest cannot load https://xxxxx.xxxxapp.net/xxx_API/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 400.
Well, your error give you an info about what to do. You are doing request with CORS (Cross-Origin Resource Sharing). It says that your request does not have Access-Control-Allow-Origin request header specified. So you should provide it. More about CORS
try to put this in your ionic.project file
"proxies": [
{
"path": "/api",
"proxyUrl": "https://xxxxx.xxxxapp.net/xxx_API/token"
}
]
}
and change the proxuUrl with your api path
Related
I'm having problem with CORS.
My Node.js Server with apollo-server-express(version 3.7)
My problem is CORS is not constant.
My React Project request api server and works well.
But sometimes api server response this error
Access to fetch at 'https://api.example.com/' from origin 'https://example.com' has been blocked by CORS policy: 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.
Why same client request sometime response cors error?
Please Help.
I am following this link to deploy an Apollo GraphQL Server with Amplify Functions:
https://dev.to/aws/10-minute-tutorial-deploy-an-apollo-graphql-server-with-amplify-functions-38p1
However, when I run "npm start", it fails to access 'http://localhost:3000', showing:
Access to fetch at 'https://******.execute-api.us-east-1.amazonaws.com/dev/graphql'
from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
Failed to load resource: net::ERR_FAILED
******.execute-api.us-east-1.amazonaws.com/dev/graphql:1
Here is how I set exports handler in index.js for Lambda:
exports.handler = server.createHandler({
cors: {
origin: "*",
credentials: true, // I tried setting false is also the same
},
});
I am not sure whether CORS is the root cause because I think the above config should make it work. I suspect that something going wrong for API end point. I see the failure using browser to access REST API endpoint, which is the link in aws-exports.js:
awsmobile.aws_cloud_logic_custom[0] = "******.execute-api.us-east-1.amazonaws.com/dev"
It shows:
{"message":"Missing Authentication Token"}
And I cannot access "******.execute-api.us-east-1.amazonaws.com/dev/graphql" either, showing:
{"message": "Internal server error"}
Is it because of missing AWS signature? Anything else I need to config for authentication?
Spent a few days, and found out the root cause. It is neither CORS nor authentication issue.
According to https://docs.aws.amazon.com/apigateway/latest/developerguide/amazon-api-gateway-using-stage-variables.html, it is expected to see "Missing Authentication Token" because I shall access to child resource instead of the endpoint itself. The child resource here is "******.execute-api.us-east-1.amazonaws.com/dev/graphql".
The Invoke URL link points to the root resource of the API in its beta
stage. Navigating to the URL by choosing the link calls the beta stage
GET method on the root resource. If methods are defined on child
resources and not on the root resource itself, choosing the Invoke URL
link returns a {"message":"Missing Authentication Token"} error
response. In this case, you must append the name of a specific child
resource to the Invoke URL link.
For why it failed to access "******.execute-api.us-east-1.amazonaws.com/dev/graphql", I found that error by checking CloudWatch logs. It is a great tool for debug.
"stack": [
"Runtime.ImportModuleError: Error: Cannot find module 'apollo-server-lambda'",
"amplify push" couldn't recognize this package because I used a terminal with node v6.9.5. After I update it to latest node and "amplify push", problem is solved.
CORS error is a distract, it doesn't show up after the above issue is fixed. CORS header wouldn't be added because index.js failed to compile.
I can't Enable CORS on my API Gateway instance, this is how it looks:
1. Settings:
2. Result:
I've tried a bunch of things like checking the DEFAULT 4XX and DEFAULT 5XX and manually inputting the Access-Control-Allow-Methods as suggested in some posts.
If I hover over the error I get: Invalid Response status code specified.
I'm able to GET using my browser but POST can only be done from Postman. My ReactJS website won't post either, throwing:
Access to XMLHttpRequest at <ENDPOINT> from origin <S3-REACT-BUCKET> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've read that I have my React app should send the CORS headers (haven't got to that) but I can't even Enable CORS in the API Gateway!
That was because No Method Response
You shouldn't manually go on the console to enable CORS. Instead follow this guide from the serverless framework.
In short:
set cors: true in your http event
return {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Credentials': true} in your handler
I have receive the following response when trying to access an API via an ajax request in Chrome:
"Failed to load http://localhost:1880/api_resource: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://localhost:3000 is therefore not allowed access."
As you can see from the message, both client and API are running locally.
I understand that this situation relates to a CORS cross origin request. I see that there are similar questions about this on stack overflow, but from those answers I do not understand what the message is telling me and where it comes from.
Specifically I understand that the response header "Access-Control-Allow-Origin" must be set (typically to '*') to allow access to the API from a different domain to the one on which the API is being served. But the message seems to relate to the request and not the response, and as far as I am aware, no request ever reaches the API.
What is a preflight request and how is it failing?
As I now understand it, modern browsers will issue a 'preflight' request before the actual cross origin request. This preflight request uses the 'OPTIONS' HTTP verb along with the CORS headers Access-Control-Request-Method and Access-Control-Request-Headers to which it expects to see a response with valid Access-Control-Allow-Origin in the header that indicates that the server understands the CORS protocol and will allow the actual (GET/POST/PUT) request.
The message "Response to preflight request doesn't pass access control check" means that the browser did not see a valid "Access-Control-Allow-Origin" header in the Options response.
In my case this was because the server (implementing a REST API) was set up to respond correctly to PUT and POST requests but not setup to respond to OPTIONS requests with the CORS headers.
in my case the problem was for my website address, i'm calling all apis from the same server but i got this error.
my website address is sateh.ir
so im my ajax request i set the url: http://sateh.ir/api/...
after getting this error and working on it for some hours, i got that i had to set ajax url to: http://www.sateh.ir/api/...
i dont know why my website cant understand that i'm calling api from the same server if i dont put 'www', but that was my problem at all.
I have implemented a restful service. I have tested it using an ajax request within the application and also with postman client and both worked. But when i try to send an ajax request from a different application i get the below error in browser console.
http://localhost:8080/AusIncomeCalculator/AUSTax/post. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8089' is therefore not allowed access.
I don't understand how the postman client get a successful response while the other applications cannot.
RESTful service is hosted in JBOSS-eap 7.0 with rest easy
What happen is for security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts.Postman is a REST Client that runs as an application inside the Chrome browser. It is specifically designed for testing rest APIs, and therefore it doesn't restrict cross origin resource request.