Доброго времени года!
Перевожу свой скромный
скрипт соц. кнопок goodshare.js на ES6. На локалхосте (macOS 10.11.6, Safari 10+, FF, Chrome) всё отрабатывается – данные по кол-ву расшариваний в социалках получаю и вывожу без проблем.
Но стоит перенести на хостинг – всё в варнингах:
[Error] XMLHttpRequest cannot load ...
Origin http://goodshare.ru is not allowed by Access-Control-Allow-Origin.
Вот живой пример:
goodshare.ru/examples/example-1.html
Конфиг такой:
– для GET запроса к соц. сети использую
Fetch API (mode: cors);
– Babel;
– собираю всё через Webpack.
Вот файл для сборки (где все import-ы):
https://github.com/koddr/goodshare.js/blob/master/...
Вот package.json:
https://github.com/koddr/goodshare.js/blob/master/...
Для примера, вот метод получения счётчика шаринга из провайдера Вконтакте:
// ./src/providers/Vkontakte.js
export class Vkontakte {
// Конструктор
constructor(url = document.location.href) {
this.url = encodeURIComponent(url);
}
// Метод для получения счётчика ВК
getCounter() {
let count_url = 'https://vk.com/share.php?act=count&index=1&url=' + this.url;
fetch(count_url, {method: 'GET', mode: 'cors'})
.then(this.checkStatus)
.then((response) => {
return response.text();
})
.then((counter) => {
document.body
.querySelectorAll("[data-counter=vkontakte]")
.forEach(function (item) {
return item.innerHTML = counter.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
});
})
.catch((error) => {
console.log('Request failed!', error);
});
};
}
// ./src/index.js
import 'whatwg-fetch'; // Полифилл для разных браузеров
import { Vkontakte } from './providers/Vkontakte'; // Подключаю провайдер Вконтакта
new Vkontakte().getCounter(); // Даёт ошибку CORS, которую описал выше.
Что не так? Почему, даже задав
mode: cors, не уходит кроссдоменный запрос?
Помогите, пожалуйста, разобраться! Буду раз любому pull-request :D
