Angular 2 post request showing this error.
do_login(username: string,password: string): Observable<string> {
let body = JSON.stringify({"username":username,"password":password});
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.loginUrl, body, options)
.map((response) => {
return response.json();
}
);
}
Get request working fine. and POST url working fine when calling on REST client
What is missing in my code. Thanks for your helps.
CORS is involved, as there is an OPTIONS request that precedes the POST request.
The server is not providing a valid response to the OPTIONS request - resulting the error you have listed above. You will need to investigate the CORS configuration of your server, as that's where to problem lies - not in the above code.
If the GET is working fine, you should look at the Access-Control-Allow-Methods configuration
It's because of CORS. You don't handle preflighted requests on the server side. This is what the 405 status code says:
405 Method Not Allowed
A request method is not supported for the requested resource; for example, a GET request on a form which requires data to be presented via POST, or a PUT request on a read-only resource.
It works for GET methods because you're in the case of simple requests, not preflighted ones. It's typically a server side issue not a frontend / Angular2 one.
These articles could help you to understand what happens:
http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/
Related
ah yes, yet another preflight error. I've been trying to get rid of this for a while now.
So im building a rust-react project and while making a post or even get request for that matter, im facing this same error.
Access to XMLHttpRequest at 'http://127.0.0.1:8000/users/create' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
The host is http://127.0.0.1:8000 and the react origin is http://localhost:3000 . I've enabled CORS in rust, with the requied headers but to no avail. Every request in my application, needs to be accompanied with a global key in the headers to access or post any sort of data. Simply put, any interaction with the server requires this key.
here's my rust code,
pub struct CORS;
#[rocket::async_trait]
impl Fairing for CORS {
fn info(&self) -> Info {
Info {
name: "Add CORS headers to responses",
kind: Kind::Response
}
}
async fn on_response<'r>(&self, _request: &'r Request<'_>, response: &mut Response<'r>) {
response.set_header(Header::new("Access-Control-Allow-Origin", "http://localhost:3000"));
response.set_header(Header::new("Access-Control-Allow-Methods", "POST, GET, PATCH, OPTIONS"));
response.set_header(Header::new("Access-Control-Allow-Headers", "Content-Type, Global-Api-Key"));
response.set_header(Header::new("Access-Control-Allow-Credentials", "true"));
response.set_header(Header::new("Access-Control-Max-Age", "86400"));
}
}
And heres the axios instance
const authSend = axios.create({
method: 'post',
baseURL: 'http://127.0.0.1:8000',
data: {},
headers: {
'Global-Api-Key': key,
Accept: 'application/json',
}
})
What i could find by scratching the internet so far is, before any request, your browser send an OPTIONS request to verify the headers before making data available for remote access. So in order to handle this, i simply need to send an HTTP ok response from the server whenever the method is OPTIONS . But wouldnt that defeat the whole purpose of the request in the first place? I know the other solutions on the internet like using a proxy or simply turning off CORS isn't good practice which is why i haven't tried them yet.
I need to know if sending such response is the most reliable way to tackle this error or if theres something more to it.
So turns out that was the only way to make things work. Despite looking for more answers, I sent an 200 OK response and things are good. another issue i was facing was, the axios.create() function used to create custom axios instance wasnt passing the required headers properly whereas when you simply call the axios function like
axios({method: 'post',
url: 'your url',
your data,
headers: { 'Global-Api-Key': key,}
})
It did the job. I dont know how or what the issue is with custom instances and passing headers. this is the page i referred and they stated the same problem with the above solution.
I am currently new in ReactJS and facing problem regarding getting the response of API the console log shows of error of this
Access to XMLHttpRequest at 'https://facebook.github.io/react-native/movies.json' from origin 'http://localhost:8000' 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.
they recommend to me that I use the barryvdh/laravel-cors to allow the cors in my API. I will show you guys my front-end code.
componentDidMount() {
axios.get('https://facebook.github.io/react-native/movies.json',{
}).then(function(response){
console.log(response)
})
}
In my logs, I will share here the captured image.
The error is in your Axios request itself, if you clearly see
axios.get('https://facebook.github.io/react-native/movies.json',{})
You've an additional parameter, While you are not passing any headers or other parameters, if you remove the {} then it should work.
axios.get('https://facebook.github.io/react-native/movies.json')
And if you see the results of your console you can see on where it clearly states that OPTIONS request is throwing a 405 status code,
from MDN
The HyperText Transfer Protocol (HTTP) 405 Method Not Allowed response
status code indicates that the request method is known by the server
but is not supported by the target resource.
You'll need to directly access the resource, probably your axios is generating Pre Flight Request with OPTIONS header due to {}, which is being rejected by the resource itself.
You can also try doing it with a simple fetch request,
fetch('https://facebook.github.io/react-native/movies.json')
.then(function(response) {
console.log(response.json())
})
CORS is controlled by backend API and in your case, you don't have control over it which is
https://facebook.github.io/react-native/movies.json.
Browser prevents your code from accessing the response because of the browser can't see Access-Control-Allow-Origin in response.
Things can still get working by making the request through a Proxy can where a proxy sends appropriate CORS header on behalf of your request.
const proxy = "https://cors-anywhere.herokuapp.com/";
const url = "https://facebook.github.io/react-native/movies.json";
fetch(proxy + url)
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("CORS Error" + url ))
Making a request through a proxy will work this way
CORS proxy will forward your request to https://facebook.github.io/react-native/movies.json
Return response from https://facebook.github.io/react-native/movies.json with Access-Control-Allow-Origin headers.
Now your browser can see Access-Control-Allow-Origin headers present in the response header.
For more detail explanation you can check out this
https://stackoverflow.com/a/43881141/2850383
I have created angular js app in which I have integrate twitch api , the api is
return $http({
url: "https://api.twitch.tv/kraken/streams",
method: "GET",
params: { channel: channel, limit: 1 },
headers: { "Client-Id": "XXXXXXXXXXXXXXX" }
})
the problem is when I reload the page the api is working but when my state changes without page reload I am getting cross origin error from this api.
the error is
Failed to load https://api.twitch.tv/kraken/streams?channel=eliazOne&limit=1: Request header field RefreshToken is not allowed by Access-Control-Allow-Headers in preflight response.
anyone has idea how to resolve cross error
When you make a request to a different domain this is called a cross domain request. Also known as a CORS request.
When you POST / PUT data to a different domain it will make an OPTIONS request first. This is to ensure that the server has Access-Control-Allow-Headers in place on the response. These headers should permit access to the domain you are making the request from. If these headers are not present then when the OPTIONS request is made it will fail and the POST / PUT will never be made.
See here for more info https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests
The simple answer is to just add these headers to your server.
I don't know if this is something Angular does on its own by default or if it's a bug elsewhere in your code, but you or Angular is sending a RefreshToken header as part of your failing request, which is not allowed per Access-Control-Allow-Headers response header in the pre-flight OPTIONS request.
$ curl -XOPTIONS https://api.twitch.tv/kraken/streams -is | grep Headers
Access-Control-Allow-Headers: Accept, Accept-Language, Authorization, Client-Id, Twitch-Api-Token, X-Forwarded-Proto, X-Requested-With, X-Csrf-Token, Content-Type, X-Device-Id
This is something all cross-origin requests do. The browser sends an OPTIONS request to make sure the real request it's about to make is allowed by the criteria set by the cross-origin server.
You need to add a ?callback=? with the URL you are passing along with a callback function. Please follow the link How to use JQuery to Access Twitch streams
This is JQuery example but the concept is same.
$.getJSON('https://api.twitch.tv/kraken/streams/' + name + '?callback=?',
function(channel){
if (channel["stream"] == null) {
$("#all").append("<p>" + channel._links.self + "</p>");
}
else {
$("#all").append("<p>Fail</p>");
}
});
});
I'm actually trying to implement a file upload system between my client side angularjs app and my server but i'm having difficulties to implement this feature.
The problem seems to come from the preflight OPTIONS request sent from Chrome.
When I test my route with postman everything work just fine.
Here is a few screen shots of the postman request execution:
First part of postman example
Second part of postman example
As you can see the route has two parameters a library id and a file to be uploaded and an authentification token.
The problems appear when I try to implement an upload feature in my angular web app.Indeed when I call my $http post request a OPTIONS preflight request is sent to my server.This OPTIONS request doesn't seem to have any of the parameters given to the post request it precedes making my authentification middleware (that has the function of validating the user/token) on my server side respond with a 401 error.
More exactly:
XMLHttpRequest cannot load ..... Response for preflight has invalid http status code 401
It seems that those preflight request are made by the browser when say detect a cross origin resource sharing. This is were I hit a brick wall. I cannot seem to understand how to:
- either send the token with the options request to validate this request
- or to bypass this options request to directly send my post request.
my upload function looks like this:
$http({
method: 'POST',
url: 'my-upload-url',
headers: {
'Content-Type': 'multipart/form-data'
},
data: {
library: my-library-id,
file: my-file-to-upload,
token: user-authentification-token
},
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
formData.append(key, value);
});
var headers = headersGetter();
delete headers['Content-Type'];
return formData;
}
})
.success(function (data) {
})
.error(function (data, status) {
});
My questions are:
Is there a way to actually send my user token in the OPTIONS request to make it valid server side?
Is there a way of formatting my post request (header/data/params) to make it bypass this preflight browser request?
Is the formatting of my post request wrong in any way making it trigger the OPTIONS request from Chrome?
Thank you in advance for your help.
Martin
In cors, the OPTIONS method is used to tell the server what will your request do. The server must handle the OPTIONS correctly so your main request will send normally. The browser will send the OPTIONS request automatically when your request is a complex cross origin request.
To bypass the OPTIONS request your request should be POST and GET and content-type must be application/x-www-form-urlencoded, multipart/form-data, or text/plain and the headers only contain Accept, Accept-Language and Content-Language.
Your request is not wrong. The reason is that your request is a cross origin request and it isn't a simple request.
So the best way to solve this problem is to make your server handle the cors request correctly.
For express you can use https://github.com/expressjs/cors
see more: cors-mdn cors-w3c
I am trying to send a POST request to an endpoint over HTTPS.
The request has 2 headers, content-type (application/json) and an apiKey.
I am using the request in a PhoneGap application built in Angular, and when the request is sent its method is changed to OPTIONS.
I know this is standard practice for browsers due to CORS, but I have a payload which I need the server to take, and I'm told by the server guys that OPTIONS requests have an empty payload with CORS (although I can't find verification on this).
The server is set up for CORS and should accept POST and OPTIONS.
For some reason my request hangs.
Angular code:
var submitDBIDResource = $resource(env.loginUserUrl, {}, {
save: {
method: 'POST',
headers: { 'apiKey': apiKey }
}
});
submitDBIDResource.save({"dbid": dbid}).$promise.then(function(data) {
console.log(data);
return data;
});
I have in my config.xml file
Any ideas what I need to do?
Thanks
The browser will automatically send an OPTIONS request before it sends the POST request. The OPTIONS request must respond with the appropriate response or else the browser will not send the POST request.
Your backend guys need to create two request handlers, one for the OPTIONS and one for the POST.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS