I am getting this error while I am calling web service from java script. But I am getting perfect response while I am use curl to call this api Please help. I am stuck in this problem
Cross-Origin Request Blocked : The Same Origin Policy disallows reading the remote resource
$("#target").click(function(){
$.ajax({
type: "POST",
headers: {
"Authorization": "Bearer code here "
},
contentType: "application/json",
url: "https://test.maegan.co:4433/RestoLinkxPluginService.svc/v2/restaurants/74/full-menus.json?menuType=PickUp"
})
.done(function( res ) {
alert( res );
});
});
You need to enable CORS on the server side, like this, specifically the HTTP header Access-Control-Allow-Origin.
Related
I've had a working cors config to GET from the server. Changing the parameters for a POST is giving the below errors
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at https://... (Reason: CORS preflight response
did not succeed). Status code: 422.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at https://... (Reason: CORS request did not
succeed). Status code: (null).
These are the params I'm using on the client and server side.
//React(fetch):
const fetch_params = {
method: 'POST',
mode: "cors", //Doesn't seem to be needed for the GET
body: JSON.stringify(fetch_body),
headers: new Headers({
"Content-Type": 'application/json'
})
}
//Lambda(Node):
response_headers: {
"Access-Control-Allow-Headers" : "Content-Type",
"Access-Control-Allow-Origin": event.headers.origin, //Essentially returns the same origin as received
"Access-Control-Allow-Methods": "OPTIONS,POST,GET"
}
The above config worked for GETs even when I was running the react app on localhost. But it's now giving errors when for POSTs even if the app is hosted on aws-amplify with https.
(The amplify and lambda are on different VPCs(?) and can't be run in the same one for now)
So the problem was, when an OPTIONS request was made, my code just saw the empty params in the body/path and returned a 422 error.
The code itself sent back a verbose error message, but browsers interpreted the 422 error as a CORS issue and hid the error message.
After hardcoding a response code of 200, I got to see the error message and found a solution:
if(event.requestContext.http.method == "OPTIONS")
{
const response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Origin": event.headers.origin,
"Access-Control-Allow-Methods": "OPTIONS,POST,GET"
},
body: "Processed Successfully"
};
return response;
}
The above responds correctly to an OPTIONS request, so the following POST can continue normally.
calling service from reactjs to spring boot. getting below error
Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type application/json
react code:
fetch(URL, {method: 'GET',
contentType: 'application/json',
mode: 'no-cors'
}).then (function (response) { return response.json()})
.then(function (json) {debugger;console.log(json)})
.catch(function (error) {debugger;console.log(error)});
spring code:
#GetMapping(path="/user/{aid}", produces= {"application/json"})
public Optional<User> getUser(#PathVariable int aid) {
return userRepo.findById(aid);
}
error message:
Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type application/json
You need to allow CORS from your spring code app. Hope this helps.Enabling Cross Origin Requests for a RESTful Web Service
application is expecting the header and you are passing different header,
for example : spring want application/json header and your passing text/html
React code :
fetch(url, {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify(data)})
I'm trying to get a token using the Outlook REST API after I got the code from this url https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize
I used a POST request with axios but the issue is I got this error:
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.
My Axios post is this:
return Axios({
method: 'post',
url: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin':'*', Content-Type, origin, authorization, accept, client-security-token"
},
data: {
'client_id': 'xxxxxx',
'scope': 'calendars.readwrite',
'code': encodeURIComponent('000000000'),
'redirect_uri': encodeURIComponent('http://localhost:3000/storeprofile/xxxxxxxxx/outlook-scheduler'),
'grant_type': 'authorization_code',
'client_secret': encodeURIComponent('xxxxxxxxxx')
};,
responseType: 'json'
}).then((response) => {
console.log('token response: ', response);
});
I get a 200 status but can't see the token I am supposed to get in the response. The response should be a json but still nothing.
Can someone please guide me? Thank you in advance!
When you register your app, you must setup the Redirect URI/URL, usually this url will be added to the CORS header.
doc : https://developer.microsoft.com/en-us/graph/docs/concepts/auth_overview#how-do-i-get-my-app-talking-to-azure-ad-and-microsoft-graph
I understand that there is a post about this.
But from my observation, these 2 methods produce different results.
If I am using this:
$.ajax({
url: myDataURL,
type: 'GET'
});
it returns results.
However, if i write in this way:
$http.get(myDataURL)
it throws the error:
Invalid CORS request
Did I miss something?
P.S.:
My data URL is from Jetty Geoserver.
CORS means Cross-origin resource sharing. You have to to configure the webserver where you are sending your $http.get request to allow cross-domain requests. You will see in the HTTP header Access-Control-Allow-Origin.
If your destination server supports CORS, you will get this response:
Access-Control-Allow-Origin: *
You will need to set headers:
var req = { method: 'POST',
url: 'http://example.com',
headers: {'Content-Type': undefined },
data: { test: 'test' }
}
As the title suggest, I need to pass an authorization token but when I check the network console, I'm getting a 403 because the accept and authorization isn't there. NOTE: I removed my authorization token for this example
$http({
url: 'http://api.stubhub.com/search/catalog/events/v2?title="san"',
dataType: 'json',
method: 'GET',
data: '',
headers: {
"Content-Type": 'application/json',
"Authorization": 'Bearer {token}'
}
}).success(function(response){
$scope.searchResponse = response;
}).error(function(error){
$scope.error = error;
});
This seems like correct syntax? What's wrong here?
EDIT: added the XHR screenshot
EDIT: 2. Here's my network traffic, HAR via paste bin:
http://pastebin.com/fiFngZSy
setting custom headers on XHR requests triggers a preflight request.
I bet you're seeing an OPTIONS request without the Authorization header, and a corresponding response whose Access-Control-Allow-Headers header value is not listing Authorization, or the API doesn't even allow unauthorized OPTIONS requests.
I don't know the stubhub api, but does it return CORS-compliant responses?