Угловой интерфейс POST to Golang не разрешен и заблокирован политикой CORS

@ user268396 рассказал вам, почему, и я расскажу вам, как.

«Access-Control-Allow-Origin» означает источник, которому вы разрешили сделать запрос на этот сервер.

Это может быть в таких формах, как:

• "*"
• " https://github.com "
[ 1111] " http://127.0.0.1:8080 "
• "chrome-extension: // *"
• "*. Some-domain.com" [ 1113]

"Access-Control-Allow-Methods" должно быть [] string ("POST", "OPTION"), если вы хотите разместить данные из CORS.

Когда дело доходит до Голанга, см. Godoc https://golang.org/pkg/net/http/#Header

type Header map[string][]string

И я всегда предлагаю использовать [114 ] вместо Header.Set(), если вы точно не знаете, что делаете. Потому что каждое значение в заголовке всегда будет [] строкой.

Так и должно быть

    res.Header().Add("Access-Control-Allow-Origin", "*")
    res.Header().Add("Access-Control-Allow-Methods", "POST")
    res.Header().Add("Access-Control-Allow-Methods", "OPTION")
    res.Header().Add("Content-Type", "application/json")

Это не так, как вы делаете CORS на бэкэнде. Ваш бэкэнд должен прослушивать запросы типа HTTP OPTIONS и отправлять туда заголовки CORS.

Поток управления примерно такой:

1. Вы запрашиваете что-то во внешнем интерфейсе
2. Браузер определяет: э-э, для этого требуется CORS
3. Сначала браузер выполняет запрос OPTIONS к запрашиваемым ресурсам для согласования CORS
4. В зависимости от результата, либо браузер выдает ваш интерфейс с ошибкой
5. , либо продолжает фактический запрос, выданный вашим интерфейсом.
6. С этого момента все работает почти нормально.
7. Когда браузер получает результат вашего фактического обратного вызова API, он отфильтровывает вещи, которые не были внесены в белый список / согласованы в шагах 3 и 4.
8. Он представляет, что потенциально подвергнутый цензуре результат для внешнего интерфейса в результате HTTP-вызова.

Проблема решена, во многом благодаря всем, кто помог мне понять, что я не делаю CORS должным образом. По сути, было две проблемы: 1. Я не знал, как правильно установить заголовки в бэкэнде, и 2. Я не форматировал свои данные JSON должным образом.

Я заметил, что это довольно популярная проблема переполнения стека, возможно, отчасти потому, что некоторые из нас не совсем понимают, как работают запросы. Итак, вот резюме, взятое из бесценной и просто написанной документации Mozilla и комментариев пользователя user268396. Я новичок в этом, поэтому, пожалуйста, поправьте меня, если я ошибаюсь.

Обычно это просто: когда вы хотите что-то запросить, браузер устанавливает соответствующие заголовки на основе того, что у вас уже есть, и отправляет запрос. Сервер отвечает.

Но, предполагая, что у вас есть конечная точка API POST на вашем внутреннем сервере и внешний интерфейс в том же домене (я полагаю, это большинство из нас в разработке, хотя, возможно, не в производстве), и вы работаете с чем-то другим, кроме application / x-www-form-urlencoded, multipart / form-data и text / plain, тогда это немного по-другому. В моем случае я работаю с приложением / JSON. Итак, это выглядит так:

1. Браузер отправляет запрос методом OPTIONS, спрашивая, какие методы и типы контента и другие вещи разрешены. Это называется предполетным запросом. Он еще не отправил мой объект JSON.

2. Сервер отвечает на предварительный запрос.

Чтобы сервер отвечал разрешенными вещами, нам нужно правильно настроить серверную часть, чтобы разрешить метод OPTIONS в Access-Control-Allow-Methods, и если вы, как и я, используете Gorilla mux, запомните разрешить это и в router.HandleFunc().

Поскольку наши передние и внутренние части находятся в одном домене ( http: // localhost ), проще всего установить Access-Control-Allow-Origin в «*». Тем не менее, мы, вероятно, не хотим делать это на производстве в зависимости от наших потребностей, поскольку * означает, что весь мир и за его пределами могут отправлять запросы.

Поскольку я хочу получать JSON, я также установил Content-Type в бэкэнде на application / json. Это была другая половина моей проблемы. Короче говоря, независимо от того, что сработало для других людей, по какой-то причине мне все же пришлось применить JSON.stringify() к моим необработанным данным JSON. Тогда это сработало идеально.

3. Как только браузер получает обратно разрешенные ОПЦИИ, он отфильтровывает запрещенные данные и отправляет запрос только с соответствующими данными. В моем случае это будет объект JSON.

И это все.