Как отправлять rest запросы с помощью Angular2?

Question

[Егор Ш.]

Добрый день, у меня есть приложение, которое стоит на локальном сервере на localhost:3000.
Есть сервер, тоже на локалке с адресом localhost:6060/api , я пытаюсь отправлять и post и get запросы с помощью ангуляра так:

let headers = new Headers();
		headers.append('Content-Type', 'application/json');
		headers.append("Access-Control-Allow-Origin", "*");
		headers.append("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
		headers.append("Access-Control-Allow-Headers", "X-Requested-With,content-type");

		this.http.get('http://localhost:6060/api/v1/userinfo', {
			headers: headers
		})
			.subscribe(
			data => {
				alert(data.json());
			},
			err => this.alertSome(err.json().message),
			() => console.log('Authentication Complete')
			);

на сервере принимаю так:

func GetUserInfo(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "application/json; charset=UTF-8")
	w.Header().Set("Access-Control-Allow-Origin", "*")
	w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE")
	w.Header().Set("Access-Control-Allow-Headers", "X-Requested-With,content-type")

То есть заголовки все проставляю, но в браузере вижу ошибку при отправке:

[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (playlist.json, line 0)
[Error] XMLHttpRequest cannot load http://localhost:6060/api/v1/auth. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

Что я сделал не так? Что я упустил? Я думал что дело в серваке, но я пробовал отправлять на публичные сервера с апи и получаю ту же ошибку, получается что дело в angular2 но я не могу понять что именно не так сделал. Спасибо.

Answer 1

[Алексей Зуев]

Дело скорее всего не в ангуляре, а в заголовках, которые вы настраиваете, или в настройках сервера.

Зачем у вас это на клиенте?

headers.append("Access-Control-Allow-Origin", "*");
headers.append("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
headers.append("Access-Control-Allow-Headers", "X-Requested-With,content-type");

Клиент автоматически добавляет заголовок Origin. Access-ы должен сервер отдавать.

А такой заголовок

headers.append('Content-Type', 'application/json');

в GET запросах вроде не нужен

Почему вы отсылаете такой запрос

this.http.get('localhost:6060/api/v1/userinfo'

А в ответе совсем другой url

XMLHttpRequest cannot load localhost:6060/api/v1/auth.

Если идет OPTIONS запрос сначала, то нужно убедиться, что сервер разрешает такие запросы. Я на днях собирал проект Angular2 + сервер на openserverе и именно с такой проблемой столкнулся, Openserver по умолчанию запрещает OPTIONS запросы, после включения всё заработало.
Поэкспериментируете, отдавайте на сервере.

w.Header().Set("Access-Control-Allow-Methods", "*")
w.Header().Set("Access-Control-Allow-Headers", "*")

Уберите ненужные заголовки на клиенте. А еще лучше - поставьте Postman и там поэкспериментируйте.
Ну и конечно в chrome во вкладке Network очень легко проверить все заголовки

Comments

[Егор Ш.]

В общем я cors библиотеку прикрутил к golang серверу для роутов, он теперь все сам выставляет, все заработало, спасибо, да, дело было в сервере

Answer 2

[_ _]

Заголовки CORS-политики должны отправляться сервером.
Т.е. у вас заголовки
headers.append("Access-Control-Allow-Origin", "*");
headers.append("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
headers.append("Access-Control-Allow-Headers", "X-Requested-With,content-type");

должно возвращаться сервером при ответе на запрос
В качестве костыля для разработки на локалке, если на проде CORS не будет нужен, можно запустить Chrome с выключенной политикой безопасности

Comments

[Егор Ш.]

Ну я ж у себя в вопросе написал, что с сервером я тоже отправляю, но тут другое дело, запрос из Ангуляра так и не уходит

[Егор Ш.]

Я уверен что дело в ангуляре, я попробовал из айос прилки сделать запрос и все сработало хорошо.