Using angularjs to write data in another machine's file failed:
No 'Access-Control-Allow-Origin' header is present on the requested resource
Setting:
anjular js client:
$http.post(url, settingData)
rest server side:
return Response.status(200).entity(jsonObject.toString())
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.allow("OPTIONS")
.build();
Related
I'm using Angular in the frontend and Jersey for backend. I am getting an exception when I execute my PUT request. This is the Angular code:
const header=new Headers({'Content-Type':'application/x-www-form-urlencoded'});
header.append("Access-Control-Allow-Methods", "POST");
header.append("Access-Control-Allow-Headers","Access-Control-Allow-Origin");
return this.http.post('http://localhost:8080',home,{headers: header})
.pipe(map((response: Response)=>{return response.json();}));
This is my filter in Jersey:
#Provider
public class CORSResponseFilter implements ContainerResponseFilter {
#Override
public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext)
throws IOException {
responseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
//headers.add("Access-Control-Allow-Origin", "http://podcastpedia.org"); podcastpedia.org
responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS");
responseContext.getHeaders().add("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
}
}
This is the exception:
Failed to load http://localhost:8080/ Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response
Anyone can help me?
Remove the Access-Control-Allow-Methods and the Access-Control-Allow-Headers from the HttpHeaders in the frontend code. These headers are supposed be sent as response headers from the server (which is what you are doing in your CORSResponseFilter).
Failed to load http://localhost:8080/ Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response
What this error is saying is that the server response header Access-Control-Allow-Headers doesn't include Access-Control-Allow-Methods in the header value (which is shouldn't). The purpose of the Access-Control-Allow-Headers is to tell the browser which request headers the client is allowed to send to the server. You can see in the CORSResponseFilter which headers you allow. Access-Control-Allow-Methods is not one of them.
And while your at it, you might as well remove all the Access-Control-XX-XX values in the Access-Control-Allow-Headers response header. These are not required. You are saying that client can send these request headers, which it shouldn't be doing.
See also:
Check out the update in this answer for a good explanation about how these headers work (if you are interested).
I have an error with CORS:
"XMLHttpRequest cannot load http://graphql-swapi.parseapp.com/. 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. The response had HTTP status code 405."
Error when I call a service method.
Code Snippet:
let headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Methods', 'POST');
headers.append('Access-Control-Allow-Headers', 'Content-Type');
//console.log(headers);
return this._http.post(apiUrl, { query: query, vars: '{}' }, { headers: headers })
.map(res => res.json().data.planets);
When I disable CORS in the browser, I get:
XMLHttpRequest cannot load xxx. Response for preflight has invalid HTTP status code 405 error.
A query and code is for sure correct.
The response had HTTP status code 405
Look that up:
405 Method Not Allowed
Response to preflight request
Look that up:
"preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send
Your server side code is, presumably, set up to add the CORS headers to the response to a POST request, but you haven't set it up to handle an OPTIONS request at all.
I have one main server which have all files and information and i have build another nodejs project to serve images. When i am trying to connect with it i see XMLHttpRequest cannot load http://localhost:2000/addImageURL.The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8754' that is not equal to the supplied origin. Origin 'http://127.0.0.1:8754' is therefore not allowed access..
To connect i am using angular with $http. On the server i have white listed my 8754 port like below.
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8754');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
Update
If i modify all urls to 127.0.0.1 then i get below error: XMLHttpRequest cannot load http://127.0.0.1/addImageURL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8754' is therefore not allowed access.
Try this
res.setHeader('Access-Control-Allow-Origin', *);
If it works, it meant the url you have provided for the cross origin 'http://127.0.0.1:8754' is wrong.
I send an angularjs $http post request to a java backend:
var url = 'http://192.168.88.245:9000/dologin';
$http.post(url,
{
"email" : "admin#admin.com",
"password" : "1"
},
{
withCredentials: true
}
)
In response i get this error:
OPTIONS http://192.168.88.245:9000/dologin
(index):1 XMLHttpRequest cannot load http://192.168.88.245:9000/dologin. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 404.
But when i use Advanced Rest Client extension for chrome and sending same request with it, Server send 200 OK. This is the header in rest extension response:
Response headers
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Credentials: true
Content-Type: application/json; charset=utf-8
Access-Control-Max-Age: 300
Content-Length: 1181
What is the difference in this two situations?
angularjs (and probably other frameworks too) do an OPTIONS request before i.e. POST, so in the OPTIONS response they receive list of methods that can be done
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
if the POST is on the list then it will do the request, in Advanced Rest Client you can choose to send OPTIONS request, do the same request you did for POST and see the output, my guess is that OPTIONS aren't properly configured on your server side and when you do POST request with Advanced Rest Client it omits the OPTIONS step that fails for angular
I have set up a REST service using java and jetty with a CORS filter:
response
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, DELETE, PUT");
I then try to fetch data from the rest service using AngularJS and ngResource:
$scope.nodes = $resource("http://localhost:8080/rest/forum/categories").query();
When I run the code I get the following message in the console log:
XMLHttpRequest cannot load http://localhost/rest/forum/categories.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:7000' is therefore not allowed access.
It seems that it has removed the :8080 from the URL in some way.
When I try to fetch the REST URL just using the browser things are fine. I have even checked the HTTP headers that are returned:
Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE, PUT
Access-Control-Allow-Origin:*
Content-Type:application/json
Can someone tell my where I have gone wrong here?