Как правильно сделать кроссдоменный AJAX через fetch?

Question

[ALexLancer]

Пытаюсь отправить SMS через sms.ru.

sms.ru/sms/send?api_id=CB50D676-EA3F-25D5-D688-A1B110DD7D4F&to=79833013604&msg=Helloworld&json=1

Ключ я специально вставил левый. Если вбить в строке браузера, то получаем JSON ответ. Пытаюсь сделать тоже самое через AJAX. SMS отправляется, но не могу получить JSON ответ. Делал это через fetch, который делает CORS запросы. Запрос проходит без ошибок, но возвращает пустое тело. Подскажите, где у меня может быть ошибка.

var data = {
	api_id : '2220D676-EA3F-25D5-D689-A1B110DD7D4F',
	to     : '79833013604',
	msg    : 'Message',
	json   : '1'
};

postData('https://sms.ru/sms/send?' + $.param(data), data )
	.then( data => console.log( data ))
	.catch( error => console.error(error));

function postData(url = '', data = {}) {
	return fetch(url, {
		method: 'GET',
		mode: 'no-cors',
		credentials: 'same-origin',
		headers: {
			'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
		},
		redirect: 'follow', // manual, *follow, error
	 })
	 .then(response => response );
}

Если в mode ставлю cors, то получаю ошибку
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Т.е. ресурс не поддерживает CORS, и надо ставить 'no-cors'. Возможно с такого ресурса получить данные ?

Answer 1

[uncletobe]

Проблема в том, что в целях безопасности, аякс не поддерживает кросс-доменные запросы. Все эти: cors, настройка заголовков, и т.п. вообще не помогли, когда была схожая проблема. Единственное решение, которое я нашел для себя - для qjuey: использовать jsonp(работает, проверено 100%). Т.е. в запросе тип отправляемых данных указать, как jsonp (dataType: 'jsonp'). Для fetch и axios нативная поддержка отсутствует, но авторы предлагают альтернативы:
axios "https://github.com/axios/axios/blob/master/COOKBOO..."
fetch "https://www.npmjs.com/package/fetch-jsonp"

Comments

[ALexLancer]

Спасибо. Я уже прикрутил этот функционал на стороне сервера на PHP. Решение в 10 строк.

Answer 2

[Петр Ш]

Может лучше поставить "прослойку" на бэке, стукаться с фронта на него и пусть уже он на sms.ru обращеется?
Заодно, спрятать свой ключ (api_id) на бэке и не светить его на фронте.

Comments

[ALexLancer]

Да, так и сделал. Глупо светить ключ.