I have been following Matt Raible tutorial to build a mobile app using jHipster, Ionic and Okta.
https://developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
However, I come across a CORS issue, whenever I try to login from the Ionic app. the web app login works perfectly.
I even tried to clone and execute the same set of steps mentioned in your git repo
https://github.com/oktadeveloper/okta-ionic4-jhipster-example
But its the same error
Access to XMLHttpRequest at 'https://dev-xxxxxx.okta.com/oauth2/default/.well-known/openid-configuration' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Sign in error: Error: Unable To Obtain Server Configuration
I tried updating the src/main/resources/config/application.yml as shown in the below video
https://www.youtube.com/watch?v=eS6Ti5Ft7JE
I even tried the #oktadev/schematics plugin
https://www.npmjs.com/package/#oktadev/schematics
My instructions say to add http://localhost:8100/implicit/callback as redirect URI when creating a native app. When you do this on app creation, a trusted origin of http://localhost:8100 is created for you. If you alter the redirect URI after you've created the app, no trusted origin is created. The solution you found is the real solution.
Go to your trusted origins: https://dev-xxxxx-admin.oktapreview.com/admin/access/api/trusted_origins
And make sure you have http://localhost:8100 there as trusted origin
Related
I have my Express API server as well as the SPA hosted on Heroku. The SPA uses Azure ad authentication using MSAL. The APIs are secured using Passport-azure-ad. Everything was working well in my localhost and the requests made where getting a success response. However on uploading the changes to Heroku I am now getting the CORS error. I have registered the API on Azure AD and exposed the API to my SPA. Any reason why I am still getting the error?
Access to fetch at 'https://myTestApp-server.herokuapp.com/getUsers' from origin 'https://myTestApp.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
To avoid the CORS error, make sure to add the header like below:
While adding the Allowed origins use * to allow all like below:
Otherwise, add particular origins like below:
Make sure to restart the Api after making the above changes.
Check whether you are using correct version of NodeJs that matches the runtime you’re developing and testing.
Try modifying CORS policy by adding .SetIsOriginAllowed((host)=> true)"
If you are adding header via Nodejs code make use of below command:
res.setHeader('Access-Control-Allow-Origin', '*');
Or
res.setHeader('Access-Control-Allow-Origin',
https://myTestApp-server.herokuapp.com:4200');
For more in detail, please refer below link:
Azure App Service No ‘Access-Control-Allow-Origin’ header is present
No 'Access-Control-Allow-Origin' header is present on the requested resource in angular app
3 Ways to Fix the CORS Error and How the Access-Control-Allow-Origin Header Works
I am trying to communicate with an app that is hidden behind an Azure Web Proxy/Active Directory setup.
I have tried the following so far:
Written an app in Ionic (Angular)
Set up Ionic's AuthConnect plugin so I am able to get hold of an access token from AD
Set the access token in an 'Authorization' header which this link appears to suggest
Send POST requests which works fine with any other API, just not the one behind the Web Proxy
Tried to set up IIS CORS module on the server-side. I have attached an image of the current config below.
When I try to send a POST request to the Web Proxy app URL, I get a 403 forbidden error on the preflight request.
I'm getting the error "Access to XMLHttpRequest at 'https://www.testurl.com/test' from origin 'http://localhost:8100' 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."
Is anyone able to point me in the right direction please? Any help would be greatly appreciated.
You might be facing CORS (Cross-Origin Resource Sharing) issues. You should try turning off CORS in whichever browser you are using. Also, as the error statement says, “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”, you should check the domain or site from where you are sending a POST request to your web proxy app url and whether CORS is disabled/bypassed for your web proxy resource or not. Try sending a POST request from your domain only, not from outside or another domain with CORS enabled.
Also, might be you are sending a POST request from a ‘http’ web server which doesn’t has an SSL certificate installed, so try installing an SSL certificate on your local host and then send a POST request.
You can also check the app virtual directory permissions for web proxy resource access and correct accessibility as you have received a forbidden 403 error while accessing the web app page.
Please refer below threads for more clarification on your issue: -
Response to preflight request doesn't pass access control check
Access to XMLHttpRequest has been blocked by CORS policy
How does Access-Control-Allow-Origin header work?
Thanking you,
I'm having a problem with my React / ASP.net core web API app and authentication with Azure AD.
The first time I log in it's all fine. Then if I sign out, I get presented with the Microsoft hosted "You have been signed out. Return to the website" page, which has a link back to the site.
If I then click on that link then the app hangs when it tries to authenticate, and I'm getting CORS errors in my Chrome browser console:
Access to fetch at
'https://login.windows.net/XXXXX/oauth2/authorize?response_type=id_token&redirect_uri=
(etc)' (redirected from
'https://uat.xxxxx.com/coreservice/api/foo?page=1&pageSize=25') from
origin 'https://uat.xxxxx.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. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
Extra info:
As an experiment I hosted a link to the site from elsewhere on the web and I get the same problematic behaviour if I click on that link.
If I hard refresh the page at this point, then it all works fine - I'm presented with the MS Azure login page as expected.
Any help would be gratefully received!
Not sure if you are using the Azure Web Apps to host your application, but the issue I had was that I was using the App Service Authentication setting under Authentication/Authorization in the Azure Portal. This setting was pointing to the Azure AD instance. But I also was using React-ADAL npm package wrapped around my application so it was causing conflicting issues since they were both using the same instance of Azure AD.
I turned off the App Service Authentication setting in the Azure portal and everything worked from there.
This setting does work as I have used it with other applications and simple web apps but I realized that the Azure App Auth setting was conflicting with the React-ADAL npm package.
Hope this helps.
I am trying to get the nodeJS keycloak adapter working with my Express application, but am facing a CORS issue when it tries to redirect to the login page for routes I have protected with the keycloak middleware:
XMLHttpRequest cannot load
http://192.168.132.44:8080/auth/realms/Actora/protocol/openid-connect/auth?client_id=actora-test&state=0e9c9778-c41b-4aa8-8052-d0f0125045ac&redirect_uri=http%3A%2F%2Flocalhost%3A5001%2Fauth%2Fchecktoken%3Fauth_callback%3D1&scope=openid&response_type=code.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:5001' is therefore not allowed
access.
In my keycloak client settings I have added a single value of '*' to the Web Origins config section.
I have also enabled cors on my node express application using the node cors library, following this express guide here
var cors = require('cors'),
app = express();
app.use(cors());
app.options('*', cors()); //enable for all pre-flight requests
I using version 3.2.1 of keycloak in case that makes any difference (I see a new version is out as an RC)
Has anyone faced similar issues and managed to resolve? I have been digging through many JBOSS mailing list threads and other stackoverflows, and all seem to suggest its as simple as adding the '*' entry to the web origins config section for the client on the keycloak admin site but this is not the case for me.
Thanks
I am also working on this issue with mindparse.
I think the key issue here is that the keycloak server is not responding with any ACCESS-CONTROL-ALLOW-ORIGIN headers despite the fact that he has correctly configured the "web Origins" setting in the keycloak admin portal.
A more in depth flow of the process is:
The user attempts to call a keycloak secured route on a node express server
Keycloak middleware detects that the user is not authenticated and
responds to the request with a 302 (redirect) to a custom login page hosted
by the keycloak server.
The browser sends an OPTIONS request to the keycloak server to check if it is
because it is a cross origin request.
The keycloak servers response DOES NOT include the ACCESS-CONTROL-ALLOW-
ORIGIN header to tell the browser that it has permission to make this
request.
The browser then reads this response and therefore does not make the follow
up request because it did not pass the access control allow origin checks
Just put the url of your app like "http://localhost:8081" in "Web Origins" field of client settings in Keycloak.
I had the exact same problem. I am using Keycloak 6.0.1
In my case, I had to add "enable-cors": true in keycloak.json in my Java backend server.
Afterward, I had another issue: 401 UNAUTHORIZED.
This post solved the problem
Web Origins must be set correctly for a configured client, yes, but it too has some pitfalls because a "+" setting depends on other values.
E.g., I had this wrong configuration for local tests:
Root URL: http://localhost:3000/
Valid redirect URIs: *
Web Origins: +
... and it failed with a CORS issue like you describe.
The issue lay with the other two settings, so this is correct and works now:
Root URL: http://localhost:3000
Valid redirect URIs: /*
Web Origins: +
(The KeyCloak UI is a usability nightmare on many fronts, imo, this is just one pitfall)
I also faced CORS issues while trying to connect to KeyCloak, even though I had correctly filled out the "Web Origins" url.
Turned out I accidentally connected to the wrong App (Client) and tenant (Realm), therefore not passing the CORS checks. Pointing to the right app and tenant fixed my problem.
I have a nodeJS express app, that serves front end app using React and also provides an API. The React app calls the backend API and as such there is no cross origin.
When I deploy this to Bluemix without SSO, everything works fine. When I deploy using SSO service I get error
Fetch API cannot load https://abcd-9bgrvudk1p-ct20.iam.ibmcloud.com/idaas/oidc/endpoint/default/authorize?response_type=code&client_id=Z4eSiL50dT&redirect_uri=https%3A%2F%2Fconsole-sso.mybluemix.net%2Fauth%2Fsso%2Fcallback&scope=openid%20openid.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://console-sso.mybluemix.net' 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.
I tried calling the API directly and after SSO auth, it works fine, But when the API is invoked by the front end app, it returns the above error.
FYI, API target is https://console-sso.mybluemix.net/api/reports/daily-reports
I have followed the Single Sign On documentation
I tried adding CORS module and response headers to allow a CORS request but it did not work. I also tried adding * to SSO configuration to allow all origins but no luck. Any pointers would be great! Thanks
This will require Support to review. Please open a ticket with the BlueMix support team