Вот пример:

ой первый пост.

Я только начал изучать Go и Angular и пытаюсь подключить угловое приложение к go api. Я написал оба и застрял, определяя корень проблемы. Я думал, что это проблема CORS, но она работает нормально, если я не включаю строку кода заголовков в мой http-запрос Angular. На данный момент я просто пытаюсь добавить заголовок. Код авторизации еще не реализован.

Оба приложения работают локально с приложением Go на порту 5000 и Angular на 4200

Угловой http-запрос, который не работает:

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

Угловой http-запрос, который работает:

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

Я получаю эту ошибку:

Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin». ПроисхождениеHTTP: // локальный: 4200Поэтому не допускается доступ. Ответ имеет HTTP-код состояния 403

Я использую gorilla / mux и gorilla / handlers в своем коде go

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)))

Заголовки от 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
 Brian20 нояб. 2017 г., 22:02
Я не уверен почемуhandlers.CORS не работает, но если вы не используете CORS, вам нужно будет проксировать ваши запросы разработки на порт 5000. В производственной среде вы будете работать на порту 80, поэтому конфликта нет, но поскольку вы используете dev-сервер angular и запустить ваш сервер Go локально,localhost:4200 а такжеlocalhost:5000 различного происхождения. Я не уверен, что «угловой путь» сделать это, ноwebpack-dev-server имеет ультра простойproxy поле вpackage.json и вы в основном хотите повторить это.
 gobuckeyes220 нояб. 2017 г., 22:47
@Mihailo Я разместил заголовки от dev-tools. Изменение всех трех CORS на {"*"} изменило ошибку на 405 - Метод не разрешен. Спасибо
 maerics20 нояб. 2017 г., 21:58
Подумайте о перефразировке вашего поста в виде вопроса ...
 Mihailo20 нояб. 2017 г., 22:50
Попробуйте включитьAllowedMethods() вернуться к тому, что они были. От вашего клиента должно быть отправлено 2 запроса, один из которых имеет методOPTIONS а другой должен бытьGET (для этого конкретного) запроса. После того, как вы вернетесьAllowedMethods попробуйте отправить запрос еще раз, и, если ошибка не устранена, обновите вопрос данными изGET запрос.
 Mihailo20 нояб. 2017 г., 22:22
Здравствуйте, gobuckeyes, не могли бы вы предоставить мне список заголовков, которые ваш клиент отправляет в своем запросе к API(из вкладки сети в dev-tools), Также проблема остается, если вы установите все 3CORS в{"*"}?

Ответы на вопрос(2)

Вот пример:

this.http
        .get(url, return new RequestOptions({
          headers: new Headers({
            Authorization: `Bearer ${authtoken}`
          }),
        }))
        .map(res => res.json());
Решение Вопроса

Угловой> 4 лучше всего использовать
Http Interceptors для добавления их к каждому запросу и последующего использования
Guards для защиты ваших маршрутов.

Вот полный примерAuthInterceptor что я использую в своем приложении:

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);
  }
}

Вам необходимо зарегистрировать ваш перехватчик вapp.module в качестве поставщика:

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,
    },
    ...
],

...

Вы можете прочитать об этом методе далее в этомПочта.

Взяв во вниманиеИдтиЭто скорее всего случай несоответствия между
Заголовки запроса вы отправляете и заголовкиCORS разрешать.
Первое, что вы должны попробовать, это разрешить им всем:

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

И если проблема исчезнет, ​​попробуйте тщательно структурироватьCORS один за другим к тому, что отправляет ваш клиент.

 gobuckeyes221 нояб. 2017 г., 01:54
Это сработало для добавления заголовка в приложение Angular. Спасибо! Для части Go я смог использовать этот подход.stackoverflow.com/questions/22452804/...
 Mihailo21 нояб. 2017 г., 03:00
Ухоженная! Рад, что я могу помочь :) Удачи!

Ваш ответ на вопрос