I'm trying the new GraphQL addition to Parse-Server. Tried to do a simple query but response is
POST '[parse-server address]' net::ERR_ABORTED 400 (Bad Request)
Access to fetch at '[parse-server address]' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
The Parse GraphQL API guide did not state what is expected from request header, so I'm trying to figure out what should be added into the request header.
Parse-Server version 3.6.0 running on heroku, client request from react 16.8.3 running on localhost.
The request from GraphQL Console in Parse-Dashboard return the correct output with no error, so the parse-server setup should not be a problem. I've allowed CORS in the server and 'Access-Control-Allow-Origin' is set to 'http://localhost:3000'. I'm guessing the request header is missing some values so I added "X-Parse-Application-Id" & "X-Parse-Master-Key".
Simple client request using Lokka:
client.query(
{
query Health {
health
}
}
).then(result => {
console.log(result.health);
});
I expect the response should be 200 as in the GraphQL console, but response is 400 Bad Request.
Related
I am trying to set up an API Gateway to call another lambda function that will upload an image to S3. The feature works well when I am using an app like POSTMAN, however when I run the browser using React I am getting the following error.
Access to fetch at 'https://.../upload' from origin 'http://localhost:3000' 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.
In my API Gateway I have the following configuration for that method
Gateway Responses for UserUpload API: default 4XX (not checked), default 5XX (not checked)
Methods: post (checked), options (checked)
Access-Control-Allow-Methods: options, post
Access-Control-Allow-Headers: '*'
Access-Control-Allow-Origin: '*'
This API uses an authorizer, I am using the one provided by Auth0 and have not edited the code at all.
And the function that my authorizer calls returns the response like the below (eg happy path):
exports.handler = async (event) => {
//do data checks and upload to s3
return {
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Methods": "*",
"Access-Control-Allow-Origin": "*",
},
statusCode: 200,
body: JSON.stringify({ message: "success" }),
};
This is my first time setting up both a lambda function, authorisation provider and API Gateway so I might be missing something obvious. I have also tried added mode: no-cors to my fetch POST requests however they still fail in a very similar way.
From what I can tell by looking at the logs of the authorizer and the lambda function that uploads the images, is that they are not even being called. So it appears the CORS error is with the API Gateway.
I have seen in a few tutorials that in their aws template yaml files they add an option AddDefaultAuthorizerToCorsPreflight as False. I can't see this anywhere in the API Gateway console.
Update: I have tested my function with the custom authoriser turned off and it works. So I know that CORS works for the options method, and for the returned request on the lambda function. It is the custom authoriser that is the problem.
The flow is currently:
Method Request - Auth: my-auth-0-authorizer
Integration Request - Type: Lambda_proxy
Lambda function
Integration response - [greyed out Proxy integrations cannot be configured to transform responses]
Method Response: HTTP Status: Proxy (with Access-Control-Allow-Origin in the response headers)
What do I have to do differently or change to allow my authoriser to respect the CORS config?
Update: After leaving my API Gateway for a day, successful responses are now working (using the flow mentioned above). I am not sure if there was a glitch in the system or there was unexpected occurring but it is now working. I am still getting a CORS issue but now only with bad responses.
The custom authoriser fails by return context.fail("Unauthorized"); and when this occurs my browser gets a CORS error. Do I have to set up special gateway responses for 4XX responses?
I am trying to make a cross domain request from my React app (localhost:3000) to my Laravel PHP app (localhost:8000). I believe I have the back end set up to accept cross domain requests. I used this: https://github.com/barryvdh/laravel-cors
I seem to have all the parameters from this answer (https://stackoverflow.com/a/38087435/1555312), so I don't get why mine doesn't work. I actually see a 200 response + the expected body when I use the chrome console.
Here is the error I see in my console:
Failed to load http://localhost:8000/api/v1/upload-sessions: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
Here is how my POST request looks like:
OPTIONS request:
POST request:
Expected response is sent, even though it complains about the CORS issue:
You need to set Access-Control-Allow-... on the response, not the request.
Once you remove that from the request, you probably won't need a pre-flight, so the OPTIONS request won't happen.
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); }
I am using Restify in my Heroku server. I am getting this error:
XMLHttpRequest cannot load https://xxx.xxx.com/charging. Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://xxx.xxx.com' is therefore not allowed access.
The response had HTTP status code 405.
My Restify configuration is:
server
.use(restify.fullResponse())
.use(restify.bodyParser())
.use(restify.queryParser())
.use(restify.CORS({
origins: ['https://xxx.xxx.com', 'http://xxx.xxx.com']
}));
What is missing in my configuration?
In some cases, you may need to use server.pre instead of server.use.
https://github.com/restify/node-restify/issues/573
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