Как исправить ошибку «Доступ к XMLHttpRequest по адресу« http: // localhost: 8000 / api / companies »из источника« http: // localhost: 3000 »был заблокирован политикой CORS» [go, reactjs, axios, mux]

В настоящее время я работаю над веб-приложением с бэкэндом Go / Postgres и интерфейсом React. У меня проблемы с CORS, несмотря на то, что я пробовал много решений, найденных здесь и в Интернете.

В настоящее время я использую пакет github.com/rs/cors для обработки CORS на стороне сервера и проверяю с помощью запроса curl, например

curl -D - -H 'Origin: https://localhost:3000' \
-H 'Authorization: Bearer mytoken' \
https://localhost:8000/api/companies

Получаю правильный ответ:

HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://localhost:3000
Content-Type: application/json
Vary: Origin
Date: Mon, 26 Aug 2019 18:19:32 GMT
Content-Length: 273

{"data":[{"ID":1,"CreatedAt":"2019-08-23T17:54:23.43867+01:00","UpdatedAt":"2019-08-23T17:59:26.898246+01:00","DeletedAt":null,"name":"Goldman Sachs","url":"https://goldmansachs.com","industry":"Investment Banking","hq":"New York, US"}],"message":"success","success":true}

Но запрос не выполняется, когда он выполняется фронтендом React с Access to XMLHttpRequest at 'https://localhost:8000/api/companies' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. сообщением.

main.go

func main() {
    router := mux.NewRouter()

    db := models.GetDB()
    defer db.Close()

    port := os.Getenv("PORT")
    if port == "" {
        port = "8000" //localhost
    }


    router.HandleFunc("/api/companies", handlers.GetAllCompanies).Methods("GET")
    ...


    c := cors.New(cors.Options{
        AllowedOrigins: []string{"https://localhost:3000"},
        AllowedMethods: []string{"POST", "GET", "OPTIONS", "PUT", "DELETE"},
        AllowCredentials: true,
    })

    router.Use(app.JwtAuthentication)

    handler := c.Handler(router)

    err := http.ListenAndServe(":"+port, handler)
    if err != nil {
        panic(err.Error())
    }
}

endpoints.js

...
export const token = () => {
  const localToken = getLocalAccessToken()
  //getLocalAccessToken returns the token correctly
  return localToken
}
...
const headers = {
  Authorization: `Bearer ${token()}`,
  'Content-Type': 'application/json',
};

export const getCompanies = () => axios.get(`https://localhost:8000/api/companies`, { headers }, { crossDomain: true });
...

Я действительно не знаю, что делать, чтобы исправить это, потому что он работает с curl, но не в браузере, и на данный момент я не понимаю, почему.

Ваша реализация cors обрабатывает только простые запросы CORS. для более продвинутых вам нужно будет правильно обработать предполетную проверку. — person Aliou Amar schedule 26.08.2019

См. также: Как вернуться на предыдущую страницу в следующем js, используя следующий / маршрутизатор?

@KevinB Я пробовал это решение на ранней стадии, у меня оно по какой-то причине не сработало (добавление 3 заголовков и возвращение 200, если метод OPTIONS) — person Aliou Amar schedule 26.08.2019

Последняя часть — это то, чего вам сейчас не хватает. То, что это не сработало для вас, не означает, что вам нужно правильно ответить на запрос OPTIONS. Все, что ему нужно, это код состояния 200 и 3 заголовка. Это не сложно. — person Aliou Amar schedule 26.08.2019

Я попробую еще раз, спасибо — person Aliou Amar schedule 26.08.2019

Post Views: 143