Cors and preflight errors with axios in vue - javascript

In my application I have got laravel as backend, jwt-auth as authentication, socialite as oauth2 provider and vue as my frontend.
Now I use axios to authorize the user by github for example (https://github.com/login/oauth/authorize) inside the client and then get the access token by the backend api.
If I do the authorize request with POSTMAN everything works, but if I do the request with my frontend axio request I get always errors. I think I get them because some Header values which are not correct. Can someone explain me which variables an axion request needs to perform an authorization request.
Kind Regards.

you can either disable cors in your browser which is very bad or you have to enable cors in your backend and to check if cors is enabled in your backend look for Access-Control-Allow-Origin header in browser network tab or you have to use proxy so that the requests are made to the same origin as seen by the browser but are redirected to some other url.
In create-react-app this works by adding
"proxy":"http://youUrl:portNo."

Related

How to implement or make browser to use cookie based authentication and stop sending authorization header on subsequent request

I have Nginx webserver with PAM module for basic authentication, and the client side is the javascript. I have to fix one security issue, where we want to stop sending authorization header from browser on the subsequent request. After the first authentication , I want browser to send cookie instead of authorization header for authentication purpose. What is the way to achieve the same.

CORS error when calling from the client?

I have a Nginx webserver in front of a Node REST API delivering JSON formatted data.
I also have a web app which consumes the above API and works fine for a majority of the requests it makes but sometimes, for certain URLs, the client gets a CORs error aka an 'Access-Control-Allow-Origin' error.
When I call the data again from the server of the web app it works fine again.
Could anyone shed some light on this issue.
I am using axios to call the API from the web app
You need to add CORS headers in response so that api can be accessed from browser.
You can use npm cors package https://www.npmjs.com/package/cors

NodeJs Passport performs CORS pre-flight if request comes from VueJS

I am writing a NodeJS / Express backend that uses Passport with the Saml-Stategy. I am using an external Identity Provider and VueJs as a frontend.
If I do an API request to the backend from the browser (Chrome + IE) everything works fine. The request goes to the backend, goes to the IdP as GET request and comes back authenticated.
But if I load the VueJs app that does the same request, passport makes a CORS pre-flight (OPTIONS) request that comes back from the IdP as 404, because OPTIONS is not supported. I tried Vue-Resource and Axios, both the same result.
Unfortunately I can not change any settings on the IdP. But why does my passport in the backend treats the requests differently? Any Ideas?
I compared the request headers from the API call and VueJs, and I cant find any headers that would cause the pre-flight.
Repository: https://github.com/tmschbgr/NodePassportExample
Versions:
Node: 8.9.0
Express: 4.16.2
Passport: ^0.4.0
Passport-saml: ^0.31.0
Vue: ^2.4.4
Axios: ^0.17.1
I found out that it was causing due to a timing issue.
It works with the following logic:
Request comes to Backend, check if authenticated
If not, go to IdP and come back. If successful redirect to /
Serve the static file AFTER the authentication check. That way the app only gets served when the user is authenticated.

Reddit OAuth2 User Authentication

I am working on a web app which requires a user to login to their reddit account and according to https://github.com/reddit/reddit/wiki/OAuth2#retrieving-the-access-token I need to send a POST request to https://www.reddit.com/api/v1/access_token with some parameters. I am currently running the server from localhost and I keep getting the error:
XMLHttpRequest cannot load https://www.reddit.com/api/v1/access_token. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.
I was struggling with this same issue and figured out that I need to register my app as "Installed" instead of "Web". This will make the authorization redirect with the bearer token instead of the code.
http://wattydev.com/authenticating_a_js-based_reddit_application_with_user_login_%28implicit_grant_flow%29

Javascript and SAML redirect fails

I try to access a resource at http://**/rest that is protected by Shibboleth SAML Serviceprovider. For that I make an XMLHttpRequest call to that address. On the resource server CORS headers are set and if there is no SAML Authentication everything works fine.
But if SAML Authentication is activated I get the following error in Chrome:
XMLHttpRequest cannot load *****/rest. The request was redirected to 'https://idp.testshib.org/idp/profile/SAML2/Redirect/SSO?SAMLRequest=********', which is disallowed for cross-origin requests that require preflight.
If I have a look at the network console I can see the following requests:
1.
Request URL:http://<resource_server>/rest
Request Method:OPTIONS
Status Code:200 OK
2.
Request URL:http://<resource_server>/rest
Request Method:GET
Status Code:302 Found
Response-Header: Location:https://idp.testshib.org/idp/profile/SAML2/Redirect/SSO?SAMLRequest=*****
So it seems that redirect will be initialized but then stops because of the error above.
Does anyone have any ideas how I can get this working?
Regards
Philipp
The 302 response is not an error. That is how a SAML protected resource requests authentication: by redirecting the user to the identity provider. Since you are making an AJAX call, however, the browser cannot follow the redirect to be authenticated.
Assuming the common Web Browser SSO Profile: The browser client needs to establish an authentication session in the same application that supports http://**/rest before you make the AJAX call. Most authentication session states are managed with cookies, so i would expect that once you have a session cookie for the application, the request to http://**/rest + the session cookie will result in a success.
There is also the Enhanced Client or Proxy (ECP) Profile. This would require passing on the authentication SAML payload from the IDP to the resource - see the spec https://www.oasis-open.org/committees/download.php/35389/sstc-saml-profiles-errata-2.0-wd-06-diff.pdf .

Categories

Resources