skip to Main Content

I’m having a tough time with some cors errors. Basically im trying to authenticate users with active directory using the OIDC passport strategy. My Front end is a vuejs app served through NGINX at http://localhost:80. The home page has a button to login through active directory. This makes a request to the nodejs backend at http://localhost:3001. It hits this route:

router.get('/ad',
  function(req, res, next) {
    passport.authenticate('azuread-openidconnect', 
      { 
        response: res,                      // required
        // resourceURL: config.resourceURL,    // optional. Provide a value if you want to specify the resource.
        // customState: 'my_state',            // optional. Provide a value if you want to provide custom state value.
        // failureRedirect: '/' 
      }
    )(req, res, next);
  },
  function(req, res) {
    log.info('Login was called in the Sample');
});

This makes a request to the active directory server of course, but the response doesn’t have an access allow origin header. So im getting some cors preflight errors. I have access to the active directory application but there doesn’t seem to be a way to resolve this

I set my cors options in the express server as so:

const corsOptions ={
  origin:'http://localhost', 
  credentials:true,            //access-control-allow-credentials:true
  optionSuccessStatus:200
}
app.use(cors(corsOptions));

Here is the error i get from chrome:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/8d0d81ba-ed03-4c6f-9248-a3b3967ca35c/oauth2/v2.0/authorize?redirect_uri=http%3A%2F%2Flocalhost%3A3001%2Fapi%2Fv1%2Fauth%2Fad%2Fcallback&response_type=code%20id_token&response_mode=form_post&client_id=446e6d62-6ba4-4c84-a9d6-8f255e576fff&state=8RyjKRutfEb2RO6ymqkRoo4br-CWUPCV&nonce=BGg4eP-lrNMPuJyn3R7bsnXJhLFhdWc9&scope=profile%20offline_access%20https%3A%2F%2Fgraph.microsoft.com%2Fmail.read%20openid&x-client-SKU=passport-azure-ad&x-client-Ver=4.3.2' (redirected from 'http://localhost:3001/api/v1/auth/ad') from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In edge surprisingly i get a different error:

Access to XMLHttpRequest at 'http://localhost:3001/api/v1/auth/userinfo' from origin 'http://localhost' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Heres the axios request:

       ad_login: function() {
          console.log(this.login.password)
          axios.get('http://localhost:3001/api/v1/auth/ad', { withCredentials: true } ).then(data => {
              console.log(data);
              console.log(data.status)
              console.log(data.request.responseURL)
              window.location.replace(data.request.responseURL)

              // this.$get_user_info()
          })
       },

I need to use credentials so setting the request credentials to false isn’t an option. And setting the wildcard as the origin fails as well. The only thing I’ve read up on that felt promising was using a cors proxy. Is there a way to add the headers to the active directory response? Or do I need a proxy? how may I go about implementing one?

2

Answers


  1. Chosen as BEST ANSWER

    Ended up Serving the vue app from the express server to get around this instead of nginx. not a great answer but a work around for anyone with a similar issue


  2. You can actually set access-control-allow-origin headers in the nginx.conf file. You can see some examples here:
    https://gist.github.com/Stanback/7145487

    This might work out to be a better solution for you.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search