0

Technologies : spring boot angular 2 google oauth

spring boot code tries to connect to google auth for login. angular code makes a http.get to fetch user info. I am getting the above 403 error. Earlier, I got "CORS preflight channel did not succeed" in firefox. Moving to chrome gives me 403.

I searched SO and google. Tried few fixes, but didnot solve my problem. Any help appreciated.

sring boot controller

    @CrossOrigin(origins = {"http://localhost:4200"})
    @RestController
    public class UserRestController {

     @RequestMapping("/")
     public RedirectView index()
     {
         RedirectView redirectView = new RedirectView();
         redirectView.setUrl("http://localhost:4200/");
         return redirectView;
//         return "index";
     }


     @CrossOrigin(origins = {"http://localhost:4200"})
    @RequestMapping("/user")
    public Principal sayHello(Principal principal) {
        return principal;
    }
    }

angular 2 code

import { Component, OnInit  } from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

@Injectable()
export class AppComponent implements OnInit {
  title = 'app works!';
  user : any;

private headers:Headers = new Headers({'Content-Type': 'application/json'});

private auth64 = btoa("my-trusted-client:secret");
private tokenHeaders = new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic '+this.auth64
});

    constructor(private http : Http){
    }


    // method for getting user details
     getUser() {
        // this.http.get('http://localhost:8080/user').success(function(user) {
        //  this.user = user;
        //  console.log('Logged User : ', user);
        // }).error(function(error) {
        //  // $scope.resource = error;
        // });

        let options = new RequestOptions({ headers: this.tokenHeaders});
        // let options = { headers : this.tokenHeaders};

        this.http.get('http://localhost:8080/user', options)
        .subscribe ((data :Response)=> {
            this.user = data;
            console.log('Logged User : ', data);
        });
    }


    // method for logout
    logout() {

        // this.http.post('http://localhost:8080/logout', null);
            this.user = null;

    }


  ngOnInit() {
    this.getUser();
  }

}
Jeya Balaji
  • 165
  • 1
  • 2
  • 11

2 Answers2

0

Try using this:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

This is a chrome extension that will help you keep going for your development and testing purpose.

For production:

I don't know much about spring but this is what I did in my PHP code when I was having this same problem.

header('Access-Control-Allow-Origin: *'); 
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 86400'); // for 1 day
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , 
Authorization');`

Hope it helps!

yash_DedSec
  • 251
  • 2
  • 11
0

Please check this answer https://stackoverflow.com/a/46433046/836701 And you want to fetch info about user in API using same libs you used for auth.

Alex Po
  • 1,837
  • 1
  • 24
  • 28