Fetch запрос возвращает пустой результат?

Question

[SergeyT89]

Fetch запрос возвращает пустой результат, а в браузере страница открывается . В консоли ошибок нет , помогите пожалуйста.

fetch("https://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml", {
		method: "GET",
		headers: {
			'Access-Control-Allow-Origin':'*',
			'Content-Type': 'text/xml; charset=utf-8'
		},
		mode: 'no-cors'
	})
        .then((response) => {
        	return response.text()
        })
        .then((str) => {
        	return(new window.DOMParser()).parseFromString(str, "text/xml")
        })
        .then((data) => {
        	console.log(data)
        })

Answer 1

[chakaponi]

Если сторонний ресурс подконтролен вам -- выставить CORS
Если не подконтролен, но то, что выделаете будет использовано только вами, то различные брузерные расширения которые автоматически проставляют необходимый CORS во всех запросах
Если не подконтролен, а ваш сервис ориентирован не только на вас, то только парсинг содержимого на сервере и получение его со своего бэкенда

Не забудьте пометить ответ как решение

Answer 2

[GrayHorse]

'Access-Control-Allow-Origin':'*'
Этот заголовок должен возвращать сервер. Здесь он бесполезен.

mode: 'no-cors'
Это не выключает CORS.

Fetch запрос возвращает пустой результат

Неправда. Возращается Response c type: "opaque".

Comments

[SergeyT89]

Хорошо, как мне получить содержимое .
|И как отключить CORS?

[GrayHorse]

Использовать прокси сервер, который будет просто добавлять 'Access-Control-Allow-Origin':'*' к респонсу. Либо использовать расширение для браузера, которое будет делать то же самое.

https://github.com/Rob--W/cors-anywhere#demo-server

Answer 3

[Алексей]

Проблема в поле mode: 'no-cors'

Вот так будет работать. Самовызывающуюся функцию можно убрать, она только для async await

(async function() {
  const response = await fetch("https://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml");
  const text = await response.text();
  const parse = (new window.DOMParser()).parseFromString(text, "text/xml");
  console.log(parse);
})();

так же можно через промисы как у вас

fetch("https://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml", {
  method: "GET",
  headers: {
    'Content-Type': 'text/xml; charset=utf-8'
  }
})
  .then((response) => {
    return response.text()
  })
  .then((str) => {
    return(new window.DOMParser()).parseFromString(str, "text/xml")
  })
  .then((data) => {
    console.log(data)
  })

Comments

[SergeyT89]

Выдает ошибку
Access to fetch at 'https://www.ecb.europa.eu/stats/eurofxref/eurofxre...' from origin '0.0.0.0:1337' 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.

[Алексей]

SergeyT89, Почитайте про корсы. Сервер не возвращает нужный заголовок. Если есть доступ к серверу - исправьте этот момент.

Либо поставьте расширение в ваш браузер отключающий корсы (я использую Allow CORS: Access-Control-Allow-Origin для хрома) и все будет ок. Лично проверено на примерах что скинул выше

[SergeyT89]

Доступа к серверу нет и получается, все клиенты у которых не будет работать запрос
Будут должны ставить расширение. И надо будет каждого клиента предупреждать чтобы заработал сайт. Установите расширение. Это какой то дикий костыль получается

[Алексей]

SergeyT89, Это не костыль, это средство для разработки. Если хотите этот api использовать на сайте - сделайте так, чтоб сервер возвращал нужный заголовок - разрешил запросы от любого сайта или конкретно от вашего домена. Иначе никак

Answer 4

[SergeyT89]

К сожалению это не рабочий вариант, есть еще какие ни-будь варианты?