I have deployed my front-end angular app with keycloak enabled. Also have a java rest based back-end for communication. When i run the app keycloak shows the login page, Then after i login it does not shows anything.
XMLHttpRequest cannot load http://test.ssdiary.com:2222/auth/realms/app1/protocol/openid-connect/token. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://test.ssdiary.com', but only one is allowed. Origin 'http://test.ssdiary.com' is therefore not allowed access.
GET http://test.ssdiary.com:2222/auth/realms/app1/protocol/openid-connect/login…ame.html/init?client_id=srms-frontend&origin=http%3A%2F%2Ftest.ssdiary.com 403 (Forbidden)strong text
Header from network tab
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:accept, authorization, content-type, x-requested-with
Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1
Connection:keep-alive
Content-Length:0
Date:Fri, 09 Jun 2017 04:57:38 GMT
Server:WildFly/10
X-Powered-By:Undertow/1
Please read the specifications of the Access-Control-Allow-Origin header here.
For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.
You are setting Access-Control-Allow-Credentials:true in your request. Thus, multiple origins are not allowed to access the returned content. Try to send a single origin as the value of Access-Control-Allow-Origin from your server.
Related
I have a React web app (a.com) that communicates with an API (b.api) via axios/XHR requests.
Now there is a specific request that the server answers with a 302 redirect to another a.com location. This fails with a CORS error in Chrome:
Access to XMLHttpRequest at 'https://a.com/redirectpath' (redirected from 'https://b.api/requestpath') from origin 'https://a.com' 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.
Contrary to the error message, the preflight request of the triggered redirect seems to have origin: null set. Is this the problem? Why does this happen, if the redirect goes to the same domain the user is on (a.com)?
Thank you for any ides!
From what I understood, this is what happened:
Browser makes a cross-origin request with Authorization header to b.api.
The Authorization header necessitates a preflight request, which is successful.
The response from b.api is a 302 redirect to a.com.
The browser makes the redirected request to a.com, which includes the same Authorization header again.
Although this request goes to the same origin, it is still considered cross-origin because it was triggered by a redirect from a different origin.
The Authorization header therefore necessitates a preflight request to a.com, with Origin: null.
This second preflight request is unsuccessful: a.com does not return Access-Control-Allow-Origin (nor Access-Control-Allow-Headers: Authorization).
I think the problem is the behavior of b.api: A request that requires an Authorization header should not lead to a 302 response, because that carries over the Authorization header (and with it the credential!) to a different server.
According to this answers enable cors in .htaccess I would like to allow cross-origin requests from React application to the local server with Laravel application. So I added these lines at the beginning of my public/.htaccess. But it does not work.
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"
The error says:
Access to XMLHttpRequest at
'http://localhost:8000/api/page/dynamic/111170/1' from origin
'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Can somebody tell me please what am I doing wrong?
In your server you need to enable requests from the local host:3000 origin. By default most server frameworks will block requests that aren’t from its own ip. This is called a cross origin request policy and its to help secure your application.
You’ll need to change your servers CORS policy to include localhost:3000 - you’ll need to google how to do this for the specific server framework you’ve chosen.
To reiterate, this is not a problem with your React code but with your server.
I have an application in AngularJS (ionic framework), and a server in Symfony.
In local everything works, but now I do my tests with the server online. Unfortunately everything does not happen like local, I have the following error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http: // localhost' is therefore not allowed access.
I was wondering how to add the "Access-Control-Allow-Origin" CORS header that is missing.
Use this bundle: NelmioCorsBundle
The CORS-Bundle is used to define the CORS rules. This bundle allows you to define which domains will have access to your REST API. And it will make your job easier too :)
I don't think your issue came from Angular, it looks like it comes from your API server.
You may need some headers server side:
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
I'm having a problem where by the cross origin requests from my Angular JS application work fine in Chrome but not in Firefox.
The error received in firefox is:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at https://api.domain.eu/join/joinstatus. (Reason:
CORS header 'Access-Control-Allow-Origin' does not match
'https://www.domain.eu, https://www.domain.eu').
I can make requests successfully until I add an Authorization header to the request.
My server (ASP.Net Web API running on IIS) has the following headers set up:
Access-Control-Allow-Origin: https://www.domain.eu
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Authorization
Access-Control-Allow-Credentials: true
Firefox successfully pre-flights the request with an OPTIONS request. Looking through this I can see the sent Origin header is contained in the returned Access-Control-Allow-Origin header.
In fact, for some reason the returned Access-Control-Allow-Origin header has my domain name twice (despite specifying it once in config) e.g.
Access-Control-Allow-Origin: https://www.domain.eu, https://www.domain.eu
That aside what is the difference between Firefox and Chrome in this regard?
What else do I need to do so that this will work in Firefox?
UPDATE
I have noticed that if I set my headers as follows...
`Access-Control-Allow-Origin: https://www.domain.eu'
... then the pre-flight OPTIONS request works fine. The Access-Control-Allow-Origin header is the same in both the request and the response. However the actual GET request then fails with the error above.
If I modify my headers as follows:
Access-Control-Allow-Origin: https://www.domain.eu, https://www.domain.eu
... (which is what Firefox alluded to in the error), then the actual pre-flight OPTIONS request fails as this time Firefox just expects a single value of https://www.domain.eu in the header.
Try:
Access-Control-Allow-Origin: https://www.domain.eu, https://domain.eu
Access-Control-Allow-Origin: https://*.domain.eu, http://*.domain.eu
Access-Control-Allow-Origin: domain.eu
Access-Control-Allow-Origin: *.domain.eu
EDIT:
Try:
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Request-Method: GET, POST, OPTIONS, PUT, DELETE
Docs:
Access-Control-Allow-Origin
A returned resource may have one Access-Control-Allow-Origin header, with the following syntax:
Access-Control-Allow-Origin: <origin> | *
The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify * as a wildcard, thereby allowing any origin to access the resource.
For example, to allow http://mozilla.com to access the resource, you can specify:
Access-Control-Allow-Origin: http://mozilla.com
You must only specify a single URI or *
This problem was caused by essentially having the wrong combination of NuGet packages in my solution. Owin and Web API CORS had both been used causing the headers to get mixed up.
I resolved this by going back to basics and working out what packages I needed and the problem went away.
you need to enable CORS in your web API project.
Check this out!
We're having an issue with restangular and handling errors from the API. If the API responds with a 200, then everything works perfectly. However, when the API returns a 409 we receive a lovely:
XMLHttpRequest cannot load https://**token=*. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9000' is therefore not allowed access.
Response headers from a valid post operation:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Authorization, Accept, X-Authorization, User-Agent, DNT, Cache-Control, X-Mx-ReqToken, Keep-Alive, If-Modified-Since
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:http://127.0.0.1:9000
Access-Control-Max-Age:1728000
Cache-Control:private, must-revalidate
Connection:keep-alive
Content-Type:text/html; charset=utf-8
Date:Fri, 29 Aug 2014 21:55:51 GMT
ETag:"*****"
Server:nginx/1.6.0
X-Frame-Options:SAMEORIGIN
X-Powered-By:HHVM/3.3.0-dev+2014.08.22
Response headers from a post operation with a 409 response captured from postman:
Cache-Control →no-cache
Connection →keep-alive
Content-Encoding →gzip
Content-Type →text/html; charset=utf-8
Date →Fri, 29 Aug 2014 21:56:59 GMT
Server →nginx/1.6.0
Transfer-Encoding →chunked
X-Frame-Options →SAMEORIGIN
X-Powered-By →HHVM/3.3.0-dev+2014.08.22
Any attempt to catch the response.status or error handling as outlined in the
restangular docs results in this:
config: Object
data: ""
headers: function (name) {
status: 0
statusText: ""
I always have a status of 0.
Let me know if you need to see any additional information.
This really has nothing to do with restangular but with your webserver config.
What is happening is that your webserver isn't set up to return the CORS headers in case an error occurs.
Because of this you can not access any of the returned data from the ajax request, even tough data was actually returned. You won't even be able to see it in chrome's network inspector ( except for the status code and headers ). Additionally, because this is a security violation, you can't even access the status code, headers or anything from javascript everything is being blocked.
You will however be able to see it in a proxy like fiddler or charles, or when you make the request directly to the api server ( in case of a GET request ), because a request was actually made and data will have been returned, the browsers security policies just denies access to it trough AJAX because of the missing CORS headers.
This doesn't mean you can just fire off ajax requests to any other domain and possibly interact with it. The only reason your requests are going trough in the first place is because the preflight OPTION request is set up to allow CORS
Solution:
Set up your WebServer to include CORS headers in case an error response is generated, the headers you are looking for are all available in the valid response you supplied ( Access-Control-* ).