Angular $http sends get instead of post - javascript

$http.post(main+'/api/getcard/', $.param({number: $scope.searchcard}), {headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} })
.then(function (response) {
if(response.data != 0)
{
$location.path('/redeem/'+response.data.id);
console.log(response.data);
}
});
When i use this code my chrome sends:
Request URL:http://cards.mporeda.pl/branch/api/getcard
Request Method:GET
Status Code:405 Method Not Allowed
But when i use the same code on laravel serve localhost:8000 i get:
Request URL:http://localhost:8000/branch/api/getcard/
Request Method:POST
Status Code:200 OK
I don't have any more $http configurations only this header option in request. I have no errors on console before this request, so i quess my code is ok. Is there any problem with my server or something?

The URL your code says to make the request to is:
main+'/api/getcard/'
The URL your request says you are using is:
Request URL:http://cards.mporeda.pl/branch/api/getcard
This is most likely caused by:
you making a POST request to the URL you are trying to make a POST request to
the server responding with a 301 or 302 status and a Location header that redirects to the same URL without the / on the end
the browser following the redirect and making a GET request
If you look back up your list of requests, you should see the POST request.
To resolve this, you need to look at the server side code which is issuing the redirect.

Related

Unable to call web-service from angularjs app

Unable to call post webservice from my application. following is the code.
var postLogin = "http://0.0.0.0:000/ddd/v1/login";
var loginvalue = {"email":"some#mail.com","password":"cbsjc6dw3bgjyfdgdKHGGDF="};
var config = {
headers: {
'Content-Type': 'application/json'
}
}
$http.post(postLogin ,loginvalue,config ).success( function(response) {
alert("response "+ response)
$scope.defer.resolve(response);
}).error(function(error){
alert("dddddd" + JSON.stringify(error));
})
If i write this code then it is returning as 400 error but if i use the postman application of google then i am getting the response without any error. So i am in confusion that whatever the code i have written is right or wrong. Hence i need to solve this issue.
Please go through the above image.
This usually happens when Client and Server are on different domains. The POST requests done by the client are first verified with a OPTIONS pre-flight check, to see if a POST would be possible. Sometimes, servers are configured to not allow OPTIONS request method. This will be the outcome of a pre-flight OPTIONS check, in such a case.
There is more information here - Why is an OPTIONS request sent and can I disable it?
Other resources for understanding the concept and helping us to configure the Response headers from the Server-side application are here:
https://medium.com/#praveen.beatle/avoiding-pre-flight-options-calls-on-cors-requests-baba9692c21a
https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
At the end of the day, if the Server is NOT configured to handle Cross-site requests, nothing can be done from the client-side.
Also, there are cases where the server does allow cross-site request, processes and send the response back to client, without the Access-Control-Allow-Origin header or with the Access-Control-Allow-Origin header, but not the same as the request origin or a wildcard "*". In such cases, browser stops processing the response, even when the call turns out to be in HTTP 200 OK Status.
Below is one such example, that I recently encountered while integrating with an external application.

Angular how not to send OPTION when sending auth token in HTTP Request

Having an issue with CORS, trying to do a GET request with Authorization token but having an issue with OPTIONS. Wondering how to not send OPTIONS when requesting GET to another server?
$http({
url: request_data.url,
type: request_data.method,
withCredentials: true,
headers: {
'Authorization': localStorage.getItem('Auth'),
'Content-Type': 'application/json; charset=utf-8'
},
crossDomain: true
}).then(function(response) {
//process your data here
vm.prodData = response.data;
console.log(response.data);
});
I can't send a request because the CORS issue, probably due to the header Authorization part.
You can't.
Authorization headers are not "safe", so you can't include them in a cross origin request without permission.
The preflight OPTIONS request is there to ask for permission.
You are doing something unusual that is a potential risk, so you have to change the server you are making the request to so it will tell the browser that it is OK to make the request.
Is far as i know when youre trying a CORS request it will always send an OPTIONS request first to check if youre allowed to make requests, you have to deal with that on server side, for instance in php i do the following:
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header( "HTTP/1.1 200 OK" );
exit();
}
that way if the client send an OPTIONS request it will automaticly send an 200 OK response and then it will wait for the correct request (GET, POST, etc)

Unable to get referer headers working

I have a proxy set up for a third party service that at the moment looks like this:
app.use('/service', (req, res) => {
let url = `http://www.service.com/endpoint/${config.POSTCODER_KEY}${req.url}`
req.headers['Referer'] = 'my.domain.com'
console.log(req.headers['Referer'])
req.pipe(request(url)).pipe(res)
})
As you can see I am trying to add Referer header to the request and it seems to be working as console.log prints out 'my.domain.com' however request fails and the error I get back from the service is 403 unauthorised referring to Referer header. When I inspect network in inspector tools my referer is displayed as localhost.
I am testing this in Postman api client (https://www.getpostman.com) by setting Referer to my white listed domain and it works. I'm not sure why it uses localhost with express.
Piping streams together only transfers the data in those streams. Headers are not a part of that. When you req.pipe(request(url)) you're only writing the request body to the proxied request. If you want to set the headers used for the proxied request, you have to pass them to request, like:
req.pipe(request({ url: url, headers: req.headers })).pipe(res);
However, as noted in my answer to your previous question, you will also need to properly set the headers on res when the proxied response arrives.

Sending HTTP cross-domain request with AJAX

I'm trying to send a HTTP cross-domain request with PUT method with AJAX.
For that, I am using this:
$.ajax({
url: ipv6Nodo+"/config?param=led",
crossDomain: true,
type: 'PUT',
data: "ls=ON",
success: function(data) {
// Do something with the result
console.log(data);
}
});
I am sniffing on the middle and I am seeing that I am really sending a request with OPTIONS method. That's not the problem, because on the server I can accept PUT or OPTIONS similarly. The problem is that the payload request is empty, there is not ls=ON, how I want it. If I throw this request to the same domain, I can see the payload. What's the problem?
Thanks in advance
There's no payload to the OPTIONS request used with Cross Origin Resource Sharing. It's a "preflight" request to find out whether the server allows CORS from your origin. Once you respond to the OPTIONS request with the correct CORS headers, you'll get the PUT request with the data.
See the link for details, but basically:
Browser sends OPTIONS with CORS request headers.
Server decides whether the request is acceptable from that origin, and if so responds with appropriate CORS response headers.
Browser responds with the actual PUT.
This is transparent to your client-side ajax code (but not your server code).

javascript / angularjs post response headers before redirect

my server gets a POST request then automatically redirects (Status Code 302) to a GET request with parameters.
I need to get the Response headers of the POST request.
What actually happens is that i get the Response headers of the GET.
I am using angularjs $resource, but a solution for native javascript will also be appreciated. Thanks!

Categories

Resources