We Keep Coding

CORS policy 'Access-Control-Allow-Origin' (Anguar 8 and Servlet)

Getting error while making post request from Angular app to servlet doPost method.
Angular application make 2 request 1 for doGet method and other doPost method.
In doGet method i added following heders as follows
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "GET");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
and solved my CORS problem for GET call.
but doPost method give CORS error even i added same header in doPost method.
angular console shows
Access to XMLHttpRequest at 'http://localhost:8080/server/config' from origin 'http://localhost:4200' 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.
Server is written in servlet and running on port 8080.
Front end is written in Angular 8 and running on port 4200.
How to solve CORS error for post call...
Thanks..

In your code, only allow GET method. Update your code like:
resp.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,OPTIONS,DELETE");

Angular with Java backend return CORS error

I´m trying to connect a Angular web to Java backend. For do this i use different endpoints. Return
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
I try adding proxy.conf.json like this in angular
{
"/URL/*": {
"target": "ENDPOINT",
"secure": false,
"changeOrigin": true
}
}
I try too modify .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
No works.
So: What´s is the properly way to abble CORS in angular endpoints?
UPDATE
httpOptions in angular
const httpOptions = {
headers: new HttpHeaders({
Authorization: "Token " + localStorage.getItem("token")
})
};

Welcome to the shitty world of modern Browsers :-)
If you use a Authorization header your Browser will perform a preflight request to check if your Browser has not been messed with via your Website and check the response. In particular, he will check if Access-Control-Allow-Origin is valid and for requests containing a Authorization header that means that a wildcard (*) is not valid! To make a Backend CORS-able you must allow the Origin of the request as a explicit Access-Control-Allow-Origin which leads many Backend developers to simply take the value of the Origin request header and put it into the Access-Control-Allow-Origin response header.
So when your Browser requests the Backend during a preflight, your Backend has to respond similar to
Access-Control-Allow-Origin: <The requesting Origin must be included>
Access-Control-Allow-Headers: origin, x-requested-with, content-type, authorization
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
More on this can be found on Mozilla's page on CORS: https://developer.mozilla.org/de/docs/Web/HTTP/CORS

cors enable in Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

I'm using spring boot service for backend and and angular 6 for frontend.
In spring boot i enabled cors using.
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/interview/**").allowedOrigins("*");
}
and i'm using intercepter for each service.
in frontend calling service:
headers = new Headers();
constructor(private http: Http, private logger: MLogger) {
this.headers.set("Access-Control-Allow-Origin", "*");
this.headers.set( 'Content-Type', 'application/json',);
this.headers.set( 'Accept', '*');
this.headers.set( 'sessionId', DataService.sessionId);
}
private options = new RequestOptions({ headers: this.headers});
interviewCommand: InterviewCommand;
getInterviewDetails(data: any): Promise<any> {
const serviceURL = environment.startInterviewURL;
return this.http
.post(serviceURL,data, this.options)
.toPromise()
.then(
interviewCommand => {
//doing some stuff
}
})
.catch(this.handleInterviewCommandError);
}
I'm getting below exception if using intercepter. Without using interepter i'm not getting cors error..
Failed to load http://localhost:7070/example/myservice: Request header
field Access-Control-Allow-Origin is not allowed by
Access-Control-Allow-Headers in preflight response.
In my intercepter i added below thing:
if (request.getMethod().equals("OPTIONS")) {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Origin-Methods", "GET, POST, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Range, Content-Disposition, Content-Description,Origin, X-Requested-With");
response.setHeader("Access-Control-Expose-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Max-Age", "4800");
}

Got Answer...
Removed this.headers.set("Access-Control-Allow-Origin", "*") from your
frontend
and
added in backend in intercepter response..
response.setHeader("Access-Control-Allow-Headers",
"Authorization,Content-Type, Content-Range, Content-Disposition,
Content-Description,Origin, X-Requested-With, sessionId");
response.setHeader("Access-Control-Allow-Origin", "*");
When you start playing around with custom request headers you will get a CORS preflight. This is a request that uses the HTTP OPTIONS verb and includes several headers, one of which being Access-Control-Request-Headers listing the headers the client wants to include in the request.
You need to reply to that CORS preflight with the appropriate CORS headers to make this work. One of which is indeed Access-Control-Allow-Headers. That header needs to contain the same values the Access-Control-Request-Headers header contained (or more).
https://fetch.spec.whatwg.org/#http-cors-protocol explains this setup in more detail.
solution is here

No 'Access-Control-Allow-Origin' is present on requested resource

I am having a weird issue where my client side request is telling me I have no 'Access-Control-Allow-Origin' present when making an HTTP POST request to a java servlet I have hosted and live. I have made sure to add the necessary headers in my response to clear up CORS requests issues but it does not seem to be recognizing the headers.
Here is my angular $http.post request I am making from the client side:
var parameter = JSON.stringify(details);
var req = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
data: parameter
}
$http.post(localurl, req).
then(function(response) {
});
Here is the error I am getting from chrome:
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.0.0.1:8081' is therefore not allowed access.
Here is the beginning of my java servlet doPost function:
#Override
public void doPost(HttpServletRequest req, HttpServletResponse res) {
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, HEAD");
res.addHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept");
I have been searching various stackoverflow questions and those response headers I am setting in my servlet should clear up the CORS requests issues but it does not seem to be recognizing the response headers I am setting at the beginning of the doPost function. Any and all help is very appreciated. Thanks in advance.

The problem is on your back-end, if yours is nodejs, should be like this way to allow Access-Control-Allow-Origin:
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxx' is therefore not allowed access

I tried to integrate paypal payment gateway into my application.
Simply I am calling java webservice using angularjs get method.
Below the angularjs http get method code
$http({
method : 'GET',
url : 'http://localhost:8080/xxxx/redirect'
}).then(function successCallback(response) {
console.info("success");
});
The Java side code tried is-
#RequestMapping(value = "/redirect", method = RequestMethod.GET, headers = "Accept=application/json")
public ModelAndView method(Payment pPayment) {
String amount=pPayment.getAmount();
String url="https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_xclick&business=wipro-seller#gmail.com&first_name=smartCity&city=Madurai&state=Tamilnadu&item_name=shirt&amount=10&night_phone_a=9513335437&item_name=shirt&address1=wipro-seller#gmail.com&business=k.tapankumar#gmail.com&quantity=1&currency=USD";
return new ModelAndView("redirect:" + url);
}
I am calling Paypal test account url from Java server side only, but still I am getting below error
XMLHttpRequest cannot load https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_xclick&business=wipro-se…o-seller#gmail.com&business=k.tapankumar#gmail.com&quantity=1&currency=USD. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
Kindly Let me know where I did wrong..

You will need to enable cross origin requests (CORS) for your HTTP requests.
Spring Documentation documents on how to enable this really well. Find it here. I suggest you read through it and try it out. If it still doesn't work, post here.
More on CORS here.

You should allow cross origin request from client side as well.
try to run after installing a chrome plugin for cross origin
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
this is the link for the one which i use.
Also you should change your headers to allow cors like this
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *