I developped an application NUXTJS with a backend in Symfony. I deploy an API REST that allows me to talk beetween front and back. Everything work in local.
I want to deploy this on my host.
So I created two subdomains : one for my front and one for my backend.
So when I try to access to my application, I try to connect but I have these two errors CORS :
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mysubdomain.domain.fr/api/login_check. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
And
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mysubdomain.domain.fr/api/login_check. (Reason: CORS request did not succeed).
How can I fix this ?
Thanks a lot
You need to enable CORS by specifying the nextjs domain, not the api domain. If you want to be sure you can also allow all domain by using a *. But this reduces security a bit.
If you really want to be secure, you could add a proxy to your nextjs server, which proxies to your Symfony application. For example, in your NextJS application, proxy /api to the Symfony application hostname.
This way you don't need to enable CORS at all.
If you use Api Platform you may need to configure the CORS_ALLOW_ORIGIN variable in your .env file 😁
Related
I am implementing an angular App and want to list all existing Realms on the keycloak Server. I configured the realm-management Client Roles of the User Logged in. Now I am able to List all Realms in a Rest-Client (https://keycloakserver/auth/admin/realms) using the login-token of this user, but when I do the same in my SPA I end up in a CORS-Error:
Access to XMLHttpRequest at 'https://keycloakserver/auth/admin/realms' from origin 'https://localhost:9001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I know how I can configure CORS Headers for a specific Client, but in my case where do I find the client or is there another way?
Ok I found the solution I had to add a + To the web-Origins.I thought it was enough to have the valid Redirect URL
We have some Restful services on a certain URI and we wanted to publish our services on the web to use them in our mobile app(written in java),
Our services was on a server which cannot handle too much requests at a same time and used it's proxy_pass functionality for this,
So I used Nginx on an intermediate server to control access to our REST server,
Now we want to protect our services by Oauth2 with Password or Client Credentials(as our mobile users should not login into our servers we cannot display any login page to them),
I setup a Keycloak server which is working and I could get token for my client. I'm going to give my auth/token URI to our mobile developers to get Oauth2 token at first and use it in their requests.
The problem is I don't know how to configure Nginx to authorize incoming REST requests with provided token in request header.
Should I config Keycloak to Handle requests and forward authorized ones to NGINX?
Thanks for your help
After some tries I found this solution:
1- you have to add njs module to nginx this is necessary, you have to compile it first(so in windows it will be much trouble, I tried mingw and stopped at a dependency called expect which is not written for mingw and it wasted a lot of time from me, actually I moved our IAM to ubuntu and compiling njs and nginx in there was done in few minutes!)
2- Introspection is the key subject here, and keycloak supports it, its URI is the same as token URI plus introspect, using Basic Authorization in header and token in body
3- nginx also supports introspection after adding njs module to it, which will let nginx support js code inculde inside config file, a great exaple is NGINX Demoes- Oauth2 Introspection OSS, just copy config file and oauth2.js file and its done. I added api directive at location tag in nginx config file to let callers know it is protected.
4- create one client for nginx in keycloak to do the introspection operation, it should be in confidential mode and Service Accounts should be enabled for it.
5- nginx should forward(proxy pass) auth/token request to IAM, so a location for this should be added in config file.
6- [for ubuntu] I have an error in nginx which tells me it cannot resolve localhost! and installing Bind 9 fixes this for me(another time wasting effort was done here).
7- So any one wants to use our service should request token first and then sends its request attached with token to nginx, nginx introspects token and if token was ok and {"active": true} were received forwards request to resource and passws reply to requester.
All done.
I have my Angular front-end set up to try and hit a RESTful endpoint. The Angular front-end is being served on localhost:3000, and the RESTful back-end is being hosted on localhost:8080.
In my Angular rest client service, I make the call (which I subscribe to elsewhere in my application):
getCurrentSlides(): Observable<Slide[]> {
return this.http.get("localhost:8080/app/slides")
.map(extractData)
.catch(handleError);
}
But when Angular tries to hit that URL, I get the following error:
XMLHttpRequest cannot load localhost:8080/app/slides. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
And yes, CORS is enabled on my server.
this.http.get("localhost:8080/app/slides")
You're missing the http:// in the URL. With that, most browsers will still require CORS for the different ports, but IE does not, so when adding http:// you should be able to test using IE:
IE Exceptions
Internet Explorer has two major exceptions when it comes to same origin policy
Trust Zones: if both domains are in highly trusted zone e.g, corporate domains, then the same origin limitations are not applied
Port: IE doesn't include port into Same Origin components, therefore http://company.com:81/index.html and http://company.com/index.html are considered from same origin and no restrictions are applied.
These exceptions are non-standard and not supported in any other browser but would be helpful if developing an app for Windows RT (or) IE based web application.
That said, you should enable CORS. (But it seems you did, so then it's just the missing http:// prefix.)
I have deployed a custom UI5 app ( using external REST ful services--> service hosted in another Java stack system) in the front end server.
I used Ajax to call the service directly with the URL as shown below.
This app has run successfully when i use "proxy" in local host(eclipse).
-->Ajax Call code Snippet
So i replaced proxy with target url while deploying in front end. (http ://xxx.xxx:port)
When running from front end server i got cross origin error as shown below.
Error1:<http://xxx:port/xxx/ngservices/rest/query/ZQUE_WEBSERV_APPHISTORY/executeGet. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx:port' is therefore not allowed access. The response had HTTP status code 401>
After enabling CORS plugin in chrome i got unauthorised error as shown below.
Error2:<http://xxx:port/xxx/ngservices/rest/query/ZQUE_WEBSERV_APPHISTORY/executeGet. Response for preflight has invalid HTTP status code 401>
I got the above errors initally while running from localhost.After that i used proxy and it got solved.
I just deployed the app in frontend server and ran it directly. I haven't done any other configurations.
Do i need to do any extra configurations for consuming these external services or kindly suggest any other suggestions.
Important info:
*Able to call external service from localhost(eclipse--> used proxy here) but not able to call service from frontend server.
*Front end architecture: Central hub deployement and connected to SRM,HR and CRM backends currently.
Regards
Phani Poorna
Both of these errors can be solved by creating and configuring a destination on your platform.
A destination is essentially a proxy: when you create it, you specify the backend URL, the authentication mechanism (Principal propagation/basic authentication etc). From your client, you just need to then connect to your destination to query the backend.
What do you mean by Fiori front end server? Are you referring to the Portal service hosted on HANA Cloud Platform?
If so, then you can create a destination by going to Connectivity - Destinations from your HCP account. From your Fiori application, you then need to connect your destination using the following URL pattern:
/destinations/<destination name>/<whatever you want to add to the URL the destination points to>
If you are using a different PaaS, I'm sure it will have some similar way of creating a proxy between your client and your backend. (Edit: I just saw you're using the Central hub deployment - I am not familiar with this system but it must have a very similar way of creating destinations).
Hope this helps, let me know if you have any questions.
I created a simple vanilla ToDo from azure mobile template to test the service but don't seem to work correctly. I can connect to https://phonegapwil.azure-mobile.net from localhost with mobile services but not after I published site, http://phonegapwil.azurewebsites.net/
error message I get:
XMLHttpRequest cannot load https://phonegapwil.azure-mobile.net/tables/todoitem?$filter=(complete%20eq%20false). No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://phonegapwil.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 400.
I also tried "*" for the CORS but no go.
Any ideas? Thanks
Thanks for your reply #phillipv. I used "*" but still didn't work. I used .net as my mobile service back-end and that was the problem. Seems like they have a bug. I recreated this using node back-end and worked without an issue.
come on Microsoft
I saw a nuget fix here
cors not working with azure mobile service .net backend