I am building a Portal using angularjs and ATG Rest API, It is giving an Error When I am trying to get Session confirmation Number using API:rest/model/atg/rest/SessionConfirmationActor/getSessionConfirmationNumber
Error:XMLHttpRequest cannot load http://IPNUMBER:Port/rest/model/atg/rest/SessionConfirmationActor/getSessionConfirmationNumber. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
API is working fine in POSTMAN, and from the direct browser query.
Please help me on this.
You best bet is to write a simple Pipeline servlet and add it to the RestPipeline configuration. The servlet would just inject the cors headers to all Rest requests.
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import atg.servlet.*;
import atg.servlet.pipeline.*;
public class CORSHeaderServlet extends InsertableServletImpl{
public CORSHeaderServlet () {}
public void service (DynamoHttpServletRequest request,
DynamoHttpServletResponse response)
throws IOException, ServletException
{
//add headers to response.
response.addHeader("Access-Control-Allow-Origin" ,"*");
passRequest (request, response);
}
}
I didn't use this API, but problem is quite common. Have a look for example here (or any other source about CORS):
How does Access-Control-Allow-Origin header work?
If your web application and service have different domains (origins), this will not work until the service allows your application to request data. When you use Postman it works, because Postman does not send the header or uses origin, which is allowed. I don't really know how it works, but it does and it's normal.
If you are using locally hosted application just for testing purposes and both service and app will have the same origin, you have two easy solutions:
You can run web browser (e.g. Chrome) with web security disabled:
Disable same origin policy in Chrome. This disables CORS and eliminates the problem.
You can install Chrome extension called Allow-Control-Allow-Origin: *. When it's enabled, it sends origin which will be allowed by the service.
However, if your service will have different origin, then you will have to configure it to allow your application to request it.
Edit
Note one thing. If you send a request different than GET or with some custom headers, browsers will firstly send an OPTIONS request. It's called preflight request. You're service will have to handle it in order to work properly.
Related
This question already has an answer here:
CORS Unauthorized 401 error when calling spring rest api
(1 answer)
Closed 3 years ago.
I'm trying to send http requests from my React client app to a RestfulApi (built with Spring), but I'm facing CORS issues.
As I understand it to solve cors issue there are several ways, 2 of them that I know:
1) Install a CORS extension on your browser (your browser will be exposed to security risks, but if it's only during development and it can be enabled/disabled then I can live with it)
2) Allow headers from your server rest API- I found a spring annotation called #CrossOrigin(origins = "", allowedHeaders = "")
https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/
Using the first approach:
First call that I perform is GET login request and it works, but I'm getting back an empty response with empty headers!
Second call is another GET request to get some projects details, but I'm getting 401!
From some investigation I understood that there is a need to send the browser sessionId (stored in cookies) and pass it to the HTTP request as param in order to be authorized... but didn't manage yet making it works.
I reached this page:
https://www.baeldung.com/spring-security-cors-preflight
Adding another class to my rest server app didn't help as well:
#EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
#Override
protected void configure(HttpSecurity http) throws Exception {
// ...
http.cors();
}
}
Install a CORS extension on your browser (your browser will be exposed to security risks, but if it's only during development and it can be enabled/disabled then I can live with it)
CORS extensions tend to just inject Access-Control-Allow-* headers into responses.
They don't do everything else that needs to be done to enable CORS.
In particular, they tend not to handle the preflight requests that need before credentials can be sent in a request. So:
the browser sends a preflight request asking for permission to make a request with credentials
the server responds with an Unauthorized error because the credentials weren't sent
the extension injects Access-Control-Allow-* headers
the browser denied access to the response to the JS because the response had an Unauthorised status (the Access-Control-Allow-* headers not being sufficient to override that)
Implement a real solution when you need CORS. Browser extensions are a waste of time because the will need replacing with real solutions in the end and only work in a subset of cases in the first place.
My system uses AngularJS 1.6 and Spring Boot2.0. My front end is just a simple form that customers can use to buy tickets for an event. When the page loads it will GET the details of the current active event, then the users can fill the form to be POSTed. No login/registration so it's just like a google form. I've built them as separate projects so they will be running in different ports. Now I want to enable csrf protection but I can't seem to make it work.
I tried to follow this tutorial but without the authentication part: https://spring.io/blog/2015/01/12/the-login-page-angular-js-and-spring-security-part-ii. When I did this I encountered a "CORS header ‘Access-Control-Allow-Origin’ missing" on the GET event details part so I added a CORS filter:
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");
chain.doFilter(request, response);
After adding that, my GET works but I encounter the same CORS error when I POST the customer's details. I can already see the XSRF-TOKEN in the cookie when I use postman but somehow my backend blocks the incoming POST. From my understanding, angular automatically uses a received XSRF token so I didn't modify anything in the frontend when implementing spring security.
I've also tried this one: https://sdqali.in/blog/2016/07/20/csrf-protection-with-spring-security-and-angular-js/. And the exact same result, if I just follow the tutorial, CORS error on GET then when I add simple CORS filter, CORS error on POST. My filters seems to get mixed up on run time.
I've tried playing around the codes in these tutorials along with some answers to related questions here in stack but all of them don't have to deal with the CORS problem.
To begin, you should check my comment on how to enable CORS with spring-boot and spring-security.
As for CSRF protection, spring-boot 2 with spring-security enable that directly. Yet, to use it with AngularJS, you need to follow this guide:
https://docs.spring.io/spring-security/site/docs/current/reference/html5/#csrf-cookie
We are also working on a project with a frontend AngularJS 1.6 and a backend spring-boot 2, but, as we didn't deploy our frontend and our backend on the same url, we got into a problem.
Example:
https://project.company.com/frontend
https://project.company.com/backend
The cookie generated by the server was set on the domain https://project.company.com with context /backend, which was unreadable from our frontend application in AngularJS.
To fix that, we forced our server to send a cookie with a context / so that it could be read from both applications.
#Configuration
#EnableWebSecurity
public class LdapAuthenticationSecurityConfiguration extends WebSecurityConfigurerAdapter {
#Override
protected void configure(HttpSecurity http) throws Exception {
final CookieCsrfTokenRepository csrfTokenRepository = CookieCsrfTokenRepository.withHttpOnlyFalse();
csrfTokenRepository.setCookiePath("/"); // Make sure that the cookie can be read from the backend and the frontend on the same domain.
http.csrf().csrfTokenRepository(csrfTokenRepository);
http.cors();
}
}
In the case where your applications are deployed on different domains, but with the same base like this:
https://frontend.company.com
https://backend.company.com
I would suggest to force the cookie send by the server with a domain like .company.com. But to do so, you will need to modify the way spring-security manage the cookie creation.
I deployed a weather app created with create-react-app. In development I would use the chrome extension allow access control origin. Now that it is deployed with github pages, I'm getting the error:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://boka44.github.io' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
It seems like I need to add a header to my server, but I'm confused as to how and where to add it.
My code is here: https://github.com/Boka44/weather
Any help would be deeply appreciated.
The API endpoint (The one that provides weather information) which you are calling has disabled CORS which means you can never make a client-facing call (i.e. through a browser) because the browser will block the call.
You have 2 options here:
If you can change the API endpoint: you can add a CORS header to allow origins from your client app's domain.
If you cannot change the server code: Create your own API endpoint that calls the original API endpoint and have your client app call your own API. (i.e. You just make a proxy server that directs your calls to the original API endpoint). In this case, you can specify a CORS header on your server to allow calls from your client app domain only.
Dark Sky API docs says that it is not allowing CORS. So you can't get data to your client side code from their server. So create a proxy server in PHP or some other platforms, which will make an api call and produces the JSON formatted response.
when trying to $.ajax to fetch some content from other websites in my website, I got the error.
Failed to load https://www.pinterest.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
I knew if the target website didn't allow localhost:8100 to fetch the data, I cannot fetch it in the client side on the web.
However, I found that mobile app (not mobile browser, but android/ios application) does not have the issue, they can simply get the website content by their default mobile built-in HTTP get function.
Do i want to ask why mobile will not encounter CORS issue (mobile can fetch the webcontent simply by the built-in http get function)?
thanks.
CORS is enforced by the browser to fulfill the security standard they have to meet. It does not affect requests made programmatically from any language, like a curl call on bash.
This is how CORS works, based on Wikipedia:
The browser sends the OPTIONS request with an Origin HTTP header. The value of this header is the domain that served the parent page. When a page from http://www.example.com attempts to access a user's data in service.example.com, the following request header would be sent to service.example.com: Origin: http://www.example.com.
The server at service.example.com may respond with:
An Access-Control-Allow-Origin (ACAO) header in its response indicating which origin sites are allowed. For example Access-Control-Allow-Origin: http://www.example.com
An error page if the server does not allow the cross-origin request
An Access-Control-Allow-Origin (ACAO) header with a wildcard that allows all domains: Access-Control-Allow-Origin: *
The way CORS works means it is optional. Browsers enforce it to prevent Javascript AJAX calls to perform malicious calls. But other types of consumers built by hand don't need to enforce CORS.
Think in this example:
You are the owner of somesite.com
Users authenticate to your site using the traditional cookie method
User logins into anothersite.com, built by an attacker. This site has the following code:
<script>fetch('http://somesite.com/posts/1', { method: 'DELETE' });</script>
... effectively performing a request to your site and doing bad things.
Happily, the browser will perform a preflight request when it sees a cross-domain request, and if your site does not respond saying that requests coming from anothersite.com are OK, you will be covered by default from a potential attack
This is why CORS only makes sense in the context of a browser. Javascript you send to the browser can not (at least easily) circumvent CORS because the only API that allows you to perform requests from the browser is written in stone. Additionally, there are no local storage or cookies outside of the browser.
Corolarium: Enforcing CORS is a deliberate action from the requester, or whoever is making the requests for you, not the sender. Javascript APIs in browsers enforce it. Other languages don't have the need for the reasons explained.
When running on a device, your files are served over the file:// protocol, not http://, and your origin will therefore not exist. That's why the request from the native device does not trigger CORS.
I'm building a RESTful API with the Restlet framework and need it to work with cross domain calls (CORS) as well as basic authentication.
At the moment I'm using the CorsFilter which does the job of making my webservice support CORS requests. But, when I try to use this with a simple ChallengeAuthenticator with HTTP Basic Authentication it won't work as I want it to (from a web site).
When I access the webservice directly via Chrome it works as intended, but when I try it in a small web application written in angularjs (jquery/javascript) and try to access the webservice it does not.
Basically what happens is that when a OPTIONS request is sent to my webservice it will not respond with the headers: 'Access-Control-Allow-Origin', 'Access-Control-Allow-Credentials', etc. as it should. Instead it is sending a respond with HTTP status code 401 saying that the authentication failed.. Is this because the authenticator is overriding the CorsFilter somehow?
My createInboundRoot method can be seen below.
#Override
public Restlet createInboundRoot() {
ChallengeAuthenticator authenticator = createAuthenticator();
RoleAuthorizer authorizer = createRoleAuthorizer();
Router router = new Router(getContext());
router.attach("/items", ItemsServerResource.class);
router.attach("/items/", ItemsServerResource.class);
Router baseRouter = new Router(getContext());
authorizer.setNext(ItemServerResource.class);
authenticator.setNext(baseRouter);
baseRouter.attach("/items/{itemID}", authorizer);
baseRouter.attach("", router);
// router.attach("/items/{itemID}", ItemServerResource.class);
CorsFilter corsFilter = new CorsFilter(getContext());
corsFilter.setNext(authenticator);
corsFilter.setAllowedOrigins(new HashSet(Arrays.asList("*")));
corsFilter.setAllowedCredentials(true);
return corsFilter;
}
(The authorizer and authenticator code is taken from the "official" restlet guide for authorization and authentication)
I've tried alot of changes to my code but none which given me any luck. But I noticed that when setting the argument "optional" in ChallengeAuthenticator to true (which "Indicates if the authentication success is optional") the CorsFilter does its job, but obviously the ChallengeAuthenticator does not care about authenticating the client and lets anything use the protected resources..
Has anyone had a similar problem? Or have you solved this (CORS + Authentication in Restlet) in any other way?
Thanks in advance!
I think that it's a bug of the Restlet CORS filter. As a matter of fact, the filter uses the method afterHandle to set the CORS headers. See the source code: https://github.com/restlet/restlet-framework-java/blob/4e8f0414b4f5ea733fcc30dd19944fd1e104bf74/modules/org.restlet/src/org/restlet/engine/application/CorsFilter.java#L119.
This means that the CORS processing is done after executing the whole processing chain (authentication, ...). So if your authentication failed, you will have a status code 401. It's actually the case since CORS preflighted requests don't send authentication hints.
For more details about using CORS with Restlet, you could have a look at this link: https://templth.wordpress.com/2014/11/12/understanding-and-using-cors/. This can provide you a workaround until this bug was fixed in Restlet itself.
I opened an issue in Github for your problem: https://github.com/restlet/restlet-framework-java/issues/1019.
Hope it helps,
Thierry
The CorsService (in 2.3.1 coming tomorrow) contains also a skippingResourceForCorsOptions property, that answers directly the Options request without transmitting the request to the underlying filters and server resources.