dongtuo6562
dongtuo6562
2017-11-20 20:57

如何将授权标头添加到Angular http请求?

  • angular
已采纳

This is my first post.

I've just started learning Go and Angular and I'm attempting to connect the angular app to a go api. I've written both and am stuck identifying the root of the problem. I thought it was a CORS problem, but it works fine if I don't include the headers line of code in my Angular http request. At this point I'm just trying to add the header. The authorization code isn't implemented yet.

Both apps are running locally with the Go app on port 5000 and Angular on 4200

Angular http request that doesn't work:

this.http.get<ProjectedBalance>(requestUrl, {headers: new HttpHeaders().set('Authorization', 'my-auth-token')})
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

Angular http request that works:

this.http.get<ProjectedBalance>(requestUrl)
    .subscribe(data => {
     this.projBalance = data.projBalance;
   }

I'm getting this error:

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:4200' is therefore not allowed access. The response had HTTP status code 403

I'm using the gorilla/mux and gorilla/handlers in my go code

router := mux.NewRouter()
router.HandleFunc("/home/{endDate}", GetProjBalance).Methods("GET", "OPTIONS")
headersOk := handlers.AllowedHeaders([]string{"X-Requested-With, Content-Type, Authorization"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
//start server on port
log.Fatal(http.ListenAndServe(":5000", handlers.CORS(originsOk, headersOk, methodsOk)(router)))

Headers from Chrome Dev Tools

Request URL:http://localhost:5000/home/2020-12-21
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:[::1]:5000
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Content-Length:0
Content-Type:text/plain; charset=utf-8
Date:Mon, 20 Nov 2017 21:39:43 GMT

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9,uz;q=0.8
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:5000
Origin:http://localhost:4200
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • douxian1770 douxian1770 4年前

    Regarding the best way of handling Authentication headers in Angular > 4 it's best to use
    Http Interceptors for adding them to each request, and afterwards using
    Guards for protecting your routes.

    Here's a full example of an AuthInterceptor that I'm using in my app:

    auth.interceptor.ts

    import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    
    import { Observable } from 'rxjs/Observable';
    
    import { AuthService } from './auth.service';
    
    @Injectable()
    export class AuthInterceptor implements HttpInterceptor {
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        req = req.clone({
          setHeaders: {
            'Content-Type' : 'application/json; charset=utf-8',
            'Accept'       : 'application/json',
            'Authorization': `Bearer ${AuthService.getToken()}`,
          },
        });
    
        return next.handle(req);
      }
    }
    

    You'll need to register your interceptor in the app.module as a provider:

    app.module.ts

    import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
    import { AuthInterceptor } from '../auth/auth.interceptor';
    
    ...
    
    imports: [
        HttpClientModule,
        ...
    ],
    providers: [
        {
          provide : HTTP_INTERCEPTORS,
          useClass: AuthInterceptor,
          multi   : true,
        },
        ...
    ],
    
    ...
    

    You can read about this method further in this post.


    Regarding the Go's side of things, this is most likely a case of mismatch between
    Request Headers you're sending and the headers CORS allow.
    First thing you should try is allowing all of them:

    headersOk := handlers.AllowedHeaders([]string{"*"})
    originsOk := handlers.AllowedOrigins([]string{"*"})
    methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
    

    And if the problem goes away try carefully structuring your CORS one by one to what your client is sending.

    点赞 评论 复制链接分享
  • duanjia7912 duanjia7912 2年前

    In case you don't want to add interceptor, this worked for me:

    var header = {
      headers: new HttpHeaders()
        .set('Authorization',  `Basic ${btoa(AuthService.getToken())}`)
    }
    
    this.http.get(url, header)
    

    For Bearer,

    set('Authorization',  `Bearer ${AuthService.getToken()}`)
    
    点赞 评论 复制链接分享
  • dtypj3308 dtypj3308 4年前

    Here is an example:

    this.http
            .get(url, return new RequestOptions({
              headers: new Headers({
                Authorization: `Bearer ${authtoken}`
              }),
            }))
            .map(res => res.json());
    
    点赞 评论 复制链接分享