$http GET request to a clojure backend, to get a list of services.
I get is an OPTIONS request (???), which gets a 405 response...
<code>
var config = {headers: {
'Authorization': 'Bearer d2VudHdvYW5nZV9tZQ',
"X-Testing" : "testing"
}
};
$http.get(SERVER.MESSAGE_SERVICES, config)
.success(function(successCallback) {
$scope.services = successCallback;
})
.error(function(errorCallback) {
console.log(errorCallback.toString);
}).
finally(function() {
console.log("Message services rest call");
});
</code>
**clojure backend**:
<code>
headers {"Access-Control-Allow-Origin" "*"
"Access-Control-Allow-Headers" "X-Requested-With, Origin,Content-Type, Accept"
"Access-Control-Allow-Methods" "GET, POST, OPTIONS"}
</code>
There is no problem that AngularJS sends an OPTIONS request, that is because CORS standards force to do so. Be sure that the server is configured to allow a GET method.
Yes as raso suggested this problem is because of Cross Origin Resource Sharing(CORS). The same old privacy policy prevents JS/ angularJS from making requests across domain boundaries.
Configure server to allow cross domain requests.
Or
If you are using Chrome than you can use this extension to surpass this problem.
Related
I have a developed a web console in angular JS in which I am using post and put methods and making HTTP requests in which I send json and calling a WSO2 REST API to get response accordingly. Its running on server but I am facing CORS problem. I have add add extension in browser and enable it otherwise I get following error.
XMLHttpRequest cannot load http://127.197.200.100:8000/ManagementAPI/createuser. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.197.200.100:8000' is therefore not allowed access.
This is how I am sending request
CreateUser: function(adata) {
var config = {
headers :{
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
var promise = $http.post(213.187.243.177:8283/ManagementAPI/createuser,adata,config).then(function (response) {
return [response.status,response.data];
},function (response) {
console.log("Error Returned" + response.status);
return [response.status,response.data];
});
return promise;
},
I have tried ThisLink for solution but did not work. Need a solution for accessing it without CORS.
Set headers in back end for avoiding CORS issues .
Sample code in php is shown in below
if (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
I am having issues only with FireFox when making a cross origin request in an Ionic app (so it's using AngularJS). The js app is doing a $http.post() to a Laravel 5.1 API, and I get the following error only in FireFox (39.0.3):
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://blah.dev/endpoint. (Reason: missing token 'content-type' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).
This is on my localhost (OSX Mavericks). and works fine in Chrome and Safari, only FireFox is given the error. I have cleared the cache, and tried in a "private window", with the same results.
Here is the Laravel route defined to handle the OPTIONS request:
Route::options('endpoint', function() {
return response('OK')
->header('Access-Control-Allow-Headers ', 'Origin, Authorization, X-Requested-With, Content-Type, Accept')
->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
->header('Access-Control-Allow-Origin', '*')
->header('Cache-Control', 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0')
;
});
Route::post('endpoint', array('uses' => '\Path\To\Controller#endpoint'));
I did find this question that seems to have a similar issue only in FireFox, but the solution was to comma separate the Allow-Methods, which I already am.
The message " missing token 'content-type' " is about the client. For a http request to be a valid post one, it must have a header
'Content-Type': 'application/x-www-form-urlencoded'
or
'Content-Type': 'multipart/form-data'
The first content-type is the most common one.
In angularjs one way to do a CORS post request is
$http.post(
'http://external-domain.ext/the/rest/url',
'param_name=param_value',
{headers:{'Content-Type': 'application/x-www-form-urlencoded'}}
).
then(function successCallback(response) {
$scope.something = response;
}, function errorCallback(response) {
// not good
});
If the server is configured with
header('Access-Control-Allow-Origin', '*'), the CORS post must succeed without authentication and credentials.
on the back end try putting
->header('Access-Control-Allow-Credentials', 'true')
and on the front end try putting
.config(function($locationProvider, $httpProvider) {
// CORS requests with credentials
$httpProvider.defaults.withCredentials = true;
})
I'm using Angular Dart V1 for a front end framework
I am using shelf && shelf router for a backend API
I'm trying to migrate some old get requests to accept Post Data
Old request:
Future fetchRoutes(FlightPostParamsVO params) async {
return _http.get(BASE + 'routes').then(handleRoutes);
}
New Request
Future fetchRoutes(FlightPostParamsVO params) async {
Map post = params.toPostable();
return _http.post(BASE + 'routes', post ).then(handleRoutes);
}
I'm setting the CORS headers in a generic response for all calls as its strictly a JSON API:
Future<Response> makeResponse( json ) async {
var response = new Response.ok( json, headers: {'content-type': 'text/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': "Origin, X-Requested-With, Content-Type, Accept",
'Access-Control-Allow-Methods': "POST, GET, OPTIONS"} );
return response;
}
I get a 404 an the following output:
OPTIONS http://localhost:1234/tickets/routes 404 (Not Found)
(index):1 XMLHttpRequest cannot load http://localhost:1234/tickets/routes. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.
When i inspect the network traffic - all my GET request DO HAVE the correct headers
When i inspect the network traffic - my POST call is lead bya request with a method set as OPTIONS - this call does not have the headers included.
My POST route handler never gets called
Router
Router airRouter = router();
Router tickets = airRouter.child('/tickets');
tickets.add('/cities', ['GET'], controller.handleCitites);
tickets.add('/times', ['GET'], controller.handleTimes);
tickets.add('/routes', ['POST'], controller.handleRoutes);
tickets.add('/{id}/tickets/', ['GET'], controller.handleTickets);
io.serve(airRouter.handler, 'localhost', 1234);
Fix Symptom:
tickets.add('/routes', ['OPTIONS'], controller.handleRoutes);
Question: Why is the HTTP Request sending a Request Method:OPTIONS before each POST, and whats the proper way only call POST?
That is not angular. Its the browser. The first request of method OPTION is to test for CORS header to make sure the browser is allowed to post.
Solution:
http://thomaslockerambling.blogspot.com/2014/10/shelf-middleware-adding-cors-headers.html
Create a CORS Object and append to header
Intercept an Call to OPTIONS
Response with status code 200 OK
I am facing a weird issue. I am running my angularjs app in nodejs server locally which calls a POST API from my app located on Google App Engine. The API is configured with all CORS headers required as follows:
def post(self):
self.response.headers.add_header("Access-Control-Allow-Origin", "*")
self.response.headers.add_header("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE,OPTIONS")
self.response.headers.add_header("Access-Control-Allow-Headers", "X-Requested-With, content-type, accept, myapp-domain")
self.response.headers["Content-Type"] = “application/json; charset=utf-8”
GET requests to the API work without issues.
POST requests to the API work but ONLY when I send the post data as a 'string of params' and NOT when post data is sent as an object which is the right way to do. Eventually I need to be able to upload pictures using this API so the first solution below might not work for me. Please help!
METHOD 1: This works:
postMessageAPI = "https://myapp-qa.appspot.com/message";
var postData = "conversationid=1c34b4f2&userid=67e80bf6&content='Hello champs! - Web App'";
var postConfig = {
headers: {
"MYAPP-DOMAIN" : "myapp.bz",
'Content-Type': 'application/json; charset=UTF-8'
}
};
$http.post(postMessageAPI, postData, postConfig).
success(function(data){
$log.log("POST Message API success");
}).
error(function(data, status) {
$log.error("POST Message API FAILED. Status: "+status);
$log.error(JSON.stringify(postData));
});
METHOD 2: This fails:
postMessageAPI = "https://myapp-qa.appspot.com/message";
var postData = ({
'conversationid' : '1c34b4f2',
'userid' : '67e80bf6',
'content' : 'Hello champs! - Web App'
});
var postConfig = {
headers: {
"MYAPP-DOMAIN" : "myapp.bz"
'Content-Type': 'application/json; charset=UTF-8'
}
};
$http.post(postMessageAPI, postData, postConfig).
success(function(data){
$log.log("POST Message API success");
}).
error(function(data, status) {
$log.error("POST Message API FAILED. Status: "+status);
$log.error(JSON.stringify(postData));
});
When I use METHOD 2 it fails with the following error in the console:
XMLHttpRequest cannot load https://myapp-qa.appspot.com/message.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://0.0.0.0:8000' is therefore not allowed access.
Please let me know if you have any solution. Thanks in advance.
The issue is most likely with Angular sending a pre-flight OPTIONS request to check the access headers from the server. I am not sure how OPTIONS requests are handled in your API, but I am betting these headers are not being added. I suggest installing Fiddler to monitor the actual requests to see what is going on with the headers. You may only be adding them to your POST responses.
See this answer for details on why METHOD 1 may work in this scenario, while METHOD 2 does not.
Here are some more details about pre-flight requests.
I have jersey framework implemented for Rest services version 2.5
I have implemented Get, it works fine and response shows as JSON object in url when I have tried.
When I have tried the same url in angular JS using http.post and $ resource, success comes as 200k but there is no response.
web app deployed in local on glassfish server and jersey rest services deployed in websphere 7
Rest controller
#GET
#Produces(MediaType.APPLICATION_JSON)
#Path("/{id}")
public Response assignAppointment(#PathParam("id") String id) {
Appointment app = new Appointment();
app.setId(id);
app.setTechName("fffff");
// return Response.status(200).entity(app).build();
return Response.ok(app).build();
}
in Angular JS
$http.get('http://mylocal.com/ntschedulerp/rest/appointment/'+$scope.appt.apptId,
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}}).then(function(appoinmentData)
{
$scope.assignmentForm = "Controller";
$scope.techName=appointmentData.data.techName;
$scope.response1=appointmentData.status;
});
response is empty but status code is 200. but when tried direct url it shows json object i browser. but while accessing from web app, the response is empty..checked in firebug
The issue got resolved. The issue occurred because of the response headers does not accept cross requests.
CORS http request.
Since I have rest server and web app in different servers, angular js does not directly accept the response which does not have specific headers.
To resolve this issue, Both server and client should have headers embedded.
I have resolved as follows
we need add these headers to the response
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods': ['OPTIONS', 'GET', 'POST'],
'Access-Control-Allow-Headers' : 'Content-Type'
On client side, add the magic statement
$http.defaults.useXDomain = true;
before calling $http method in controller, I am using angular js 1.2 version, earlier versions, it might need to do like this..not tested but found some where
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
on server side, I am using jersey framework (2.5),
#GET
#Produces(MediaType.APPLICATION_JSON)
#Path("/{id}")
public Response assignAppointment(#PathParam("id") String id) {
Appointment app = new Appointment();
app.setId(id);
app.setTechName("xxxx");
ResponseBuilder response=Response.status(200).entity(app);
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Methods", "Cache-Control, Pragma,
Origin, Authorization, Content-Type, X-Requested-With");
response.header("Access-Control-Allow-Headers", "GET, PUT, OPTIONS,
X-XSRF-TOKEN");
return response.build();
}
one can use,
#Context HttpServletResponse
as method argument in rest methods, if using older versions.