Angular & Golang "Нет контроля доступа, разрешено происхождение ..." - PullRequest
Новая
       17

Angular & Golang "Нет контроля доступа, разрешено происхождение ..."

0 голосов
/ 07 июня 2019

Я использую Angular для создания интерфейсного приложения с графическим интерфейсом для взаимодействия с моим API-сервером, написанным на Go.

Я попытался добавить заголовок на обоих концах, на клиенте и на сервере, но безуспешно. Я попытался отключить перехватчик http, поэтому он не добавляет токен JWT, и в этом случае я получаю ошибку неавторизованного доступа, которая ожидается. Но везде, где я добавляю токен к запросу (с помощью перехватчика или вручную перед выполнением запроса get), ошибка несанкционированного доступа исчезает (пока все хорошо), но затем появляется ошибка отсутствующего заголовка. Сервер должен возвращать данные JSON о сохраненных статьях, и он работает с Postman и другим моим внешним интерфейсом JS.

Go код: 

r.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
  http.ServeFile(w, r, "./index.html")
})

allowedHeaders := handlers.AllowedHeaders([]string{"X-Requested-With"})
allowedOrigins := handlers.AllowedOrigins([]string{"*"})
allowedMethods := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS"})

r.HandleFunc("/login", GetTokenHandler).Methods("POST")

apiRouter := r.PathPrefix("/api").Subrouter()
apiRouter.Use(jwtMiddleware.Handler)
apiRouter.HandleFunc("/articles", getArticles).Methods("GET")
apiRouter.HandleFunc("/articles/{id}", getArticle).Methods("GET")
apiRouter.HandleFunc("/articles", createArticle).Methods("POST")
apiRouter.HandleFunc("/articles/{id}", updateArticle).Methods("PUT")
apiRouter.HandleFunc("/articles/{id}", deleteArticle).Methods("DELETE")
fmt.Println("Server running on port", port)
log.Fatal(http.ListenAndServe(port, handlers.CORS(allowedHeaders, allowedOrigins, allowedMethods)(r)))

Угловой запрос на получение: 

this.http.get('http://localhost:8000/api/articles')
.subscribe(res => {
    console.log(res);
},
err => console.log(err));

Угловой HttpInterceptor: 

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const token = localStorage.getItem("token");

        if (token) {
            const cloned = req.clone({
                headers: req.headers.append("Authorization", "Bearer " + token)
            });

            return next.handle(cloned);
        }
        else {
            return next.handle(req);
        }
    }
}

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

... запрос .. был заблокирован политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Редактировать: Go import: 

import (
    "encoding/json"
    "fmt"
    "log"
    "net/http"
    "strconv"
    "strings"
    "time"

    jwtmiddleware "github.com/auth0/go-jwt-middleware"
    "github.com/dgrijalva/jwt-go"
    "github.com/gorilla/handlers"
    "github.com/gorilla/mux"
)

Ответы [ 2 ]

1 голос
/ 07 июня 2019

Эта проблема известна как CORS . C ross O rigin R esource S haring. Это возникает, когда источник запроса и ответа различен. Например: если ваш проект находится на https://139.43.33.122:1111/, а ваш сервер размещен на https://123.0.3.444:3000,, то источник вашего запроса и ответа совершенно различен, и, таким образом, браузер заблокирует ответ. Это вещь браузера. Почтальон не заботится об их происхождении. Чтобы получить ответ, есть 2 способа (возможно, больше, но я использую только эти 2).

  1. Дополнительные заголовки: Если у вас есть доступ / разрешение на код сервера, добавьте дополнительный заголовок к ответам сервера: Access-Control-Allow-Origin: http://siteA.com, Access-Control-Allow-Methods: GET, POST, PUT, Access-Control-Allow-Headers: Content-Type .

  2. Использовать расширения: Существует несколько расширений, которые могут обойти это ограничение. Если у вас нет доступа или разрешения на изменение ответа сервера, то это путь. Я лично использую только этот метод.

1 голос
/ 07 июня 2019

Следующие вещи помогут вам решить эту проблему:

1) Поскольку вы включаете Авторизация , а также в заголовок запроса, разрешите то же самое на сервере, который, по-видимому, пропущен.

2) Вы можете использовать Proxy.config для сопоставления с нужным хостом (имя хоста + порт) a) Создать файл proxy.config.json: 

{
  "/api/articles": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

b) запустить с помощью следующей команды: 

ng serve --proxy-config proxy.conf.json

См. Это для настройки прокси

Попробуйте сначала эти вещи.

...