Curl смог, а злосчастный fetch (firefox) не может?

Question

[Денис]

Транспортная компания предоставляет API. Используется HTTP Basic Authorization
Так работает:

curl --header "Content-Type: application/json" -X POST -u TOKEN: URL -d @req.json

Где "req.json":

{"date": {"from": "2024-07-01T00:00:00","to": "2024-07-08T00:00:00"}}

Но хочу сделать на javascript

create = function( d ) {
	console.log( d );
}

var options = {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json',
		'Authorization': 'Basic ' + btoa( TOKEN + ':' )
	},
	body: JSON.stringify({
		date: { "from": "2024-07-01T00:00:00", "to": "2024-07-09T00:00:00" }
	})
}
fetch( url, options )
	.then( response => response.json() )
	.then( result => create( result ) )
	.catch( error => console.log(error.message) );

Ошибка:

CORS Missing Allow Origin

Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на URL. (Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»). Код состояния: 404.

Отключение CORS (mode: 'no-cors') результата не дает.
WTF?

Answer 1

[Михаил Р.]

CORS API ограничивает запросы с Вашего домена (Вы же выполняете js код в браузере?). Даже если Вы укажите no-cors, то API домен все равно принимает окончательное решение.

Вам нужен любой сервер, для проксирования запроса. Выполните свой код на nodejs, и все заработает:

import fetch from 'node-fetch';
import {create} from './create.js';

const url = 'https://api.site.ru/endpoint';
const TOKEN = 'TOKEN';

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Basic ${Buffer.from(`${TOKEN}:`).toString('base64')}`,
  },
  body: JSON.stringify({
    date: {
      from: '2024-07-01T00:00:00',
      to: '2024-07-09T00:00:00',
    },
  }),
};

fetch(url, options)
  .then((response) => response.json())
  .then((result) => create(result))
  .catch((error) => console.error(error.message));

Answer 2

[Rsa97]

no-cors это вообще из другой оперы. Эта опция позволяет выполнить только простой запрос (HEAD, GET, POST) с ограниченным набором заголовков (Accept, Accept-Language, Content-Language, Content-Type и Range), но не даёт JS доступа к свойствам Response, то есть телу и заголовкам ответа.

Сама политика CORS контролируется браузером и не даёт делать cross-origin запросы, если сервер, к которому сделан запрос, не возвращает явного разрешения на это в заголовках ответа. Для обхода надо делать запрос через свой бэкенд, который выполняет в этом случае роль прокси для внешнего ресурса.

Answer 3

[Денис]

Установил расширение для браузера "HTTP request Maker", оно работает зараза.