-
CORS stands for Cross-Origin Resource Sharing
-
CORS is a security mechanism built into (all) modern web-browsers (yes! into your web browser! That’s why your curl calls works fine). It basically blocks all the http requests from your front end to any API that is not in the same “Origin” (domain, protocol, and port—which is the case most of the time).
-
CORS is a mechanism built into web browser. It’s not a UI code issue To fix CORS problems, you need to make changes on the API side.
UI domain: http:https://localhost:9000/
Backend Domain: http:https://localhost:8080/ --> Backend enables all the requests from UI domain.
UI is trying to connect to backend service hosted at http:https://localhost:8080/greeting.
So for browser, request is made to the domain different(i.e. localhost:8080/greeting) from that of its own domain (i.e. http:https://localhost:9000/)
So browser protects itself from such requests by blocking it.
- Open command Terminal 1(or run in IDE):
$./gradlew clean build -x test && java -jar build/libs/gs-rest-service-cors-0.1.0.jar - On Terminal 2:
$./mvnw clean install -DskipTest test; mvn spring-boot:run -Dserver.port=9000- open http:https://localhost:9000/
- Optional Step(without changing hello.js file)
open debugger window at "http:https://localhost:9000/" and execute following js (hello.js content is also same, just with ajax request)
var createCORSRequest = function(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// Most browsers.
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
} else if (typeof XDomainRequest != "undefined") {
// IE8 & IE9
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
};
var url = 'http:https://localhost:8080/greeting';
var method = 'GET';
var xhr = createCORSRequest(method, url);
xhr.onload = function() {
var v = xhr.responseText;
console.log(xhr.responseText);
$('.greeting-id').append(v.id);
$('.greeting-content').append(v.content);
console.log("success");
};
xhr.onerror = function() {
console.log("error");
};
xhr.send();OR
POST call
var createCORSRequest = function(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// Most browsers.
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
} else if (typeof XDomainRequest != "undefined") {
// IE8 & IE9
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
};
var url = 'http:https://localhost:8080/add';
var method = 'POST';
var xhr = createCORSRequest(method, url);
xhr.onload = function() {
var v = xhr.responseText;
console.log(xhr.responseText);
$('.greeting-id').append(v.id);
$('.greeting-content').append(v.content);
console.log("success");
};
xhr.onerror = function() {
console.log("error");
};
var data=JSON.stringify({"a":"b"})
//add body data here
xhr.send(data);- Check network tab on debugger, we can see OPTIONS and GET calls
- step 2-5 can be done for any other port(here 9000)
Post call
OR
We can test this using POSTMAN/Request Client by passing header "Origin"
Origin: http:https://localhost:9000
Then send the request OPTION/GET/POST
This will result in Invalid CORS request
curl -X GET \
http:https://localhost:8080/greeting \
-H 'Accept: */*' \
-H 'Access-Control-Request-Method: GET' \
-H 'Cache-Control: no-cache' \
-H 'Connection: keep-alive' \
-H 'Host: localhost:8080' \
-H 'Origin: http:https://localhost:30840' \
-H 'accept-encoding: gzip, deflate' \
-H 'cache-control: no-cache' \
-H 'content-length: 'But this will result in success:
curl -X GET \
http:https://localhost:8080/greeting \
-H 'Accept: */*' \
-H 'Access-Control-Request-Method: GET' \
-H 'Cache-Control: no-cache' \
-H 'Connection: keep-alive' \
-H 'Host: localhost:8080' \
-H 'Origin: http:https://localhost:9000' \
-H 'accept-encoding: gzip, deflate' \
-H 'cache-control: no-cache' \
-H 'content-length: 'Refs:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://spring.io/guides/gs/rest-service-cors/#initial
https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues