Как реализовать политику CORS в fetch?

Question

[Drakondr]

в общем, есть fetch запрос

fetch('http://localhost:3000', {
    headers: {
        'Content-Type': 'text/plain'
    }
})
    .then(res => {
       // img.style.background = `url(http://localhost:3000) no-repeat`
        console.log(res)
        res.text().then(data2 => {
            console.log(data2)
        })
    })

Есть код на сервере

var http = require('http')
var data2 = 'hello'

http.createServer(function(req, res) {
	res.writeHead(200, { 'Content-Type': 'text/plain' });
  	res.end(data2);
	console.log('img')
}).listen(3000)
console.log('Сервер работает')

при отправке запроса вылезает ошибка

Access to fetch at 'localhost:3000' from origin 'localhost' 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.

что у меня в коде не так, с вариантом поставить mode: 'no-cors' уже fetch не может обрать запрос и с моего сервера, и со стороннего

Answer 1

[Александр]

- res.writeHead(200, { 'Content-Type': 'text/plain' });
+ res.writeHead(200, {
+     'Content-Type': 'text/plain',
+     'Access-Control-Allow-Origin': '*'
+ });

Comments

[Aetae]

Ага, а потом эта хрень в коде так и улетит на прод, после чего улетят чьи-то денежку со счёта.)

[Александр]

Aetae, Для прода как-то мало кода.

[Drakondr]

Aetae, я и слова про прод не сказал

[Aetae]

Drakondr, дык в том и суть, ты (с вероятностью 99%) настраиваешь себе dev enviroment, а конкретнее возможность разрабатывать сервер и фронт одновременно, разнеся по портам.

И вроде бы всё хорошо, добавили Access-Control-Allow-Origin и понеслась. Вот только через пару месяцев, когда сервер сильно разжиреет и пора будет выводить его в прод - очень легко будет не заметить такой "древний" кусок кода, предназначенный исключительно для dev'а.

По нормальному это делается настройкой для фронта dev-server proxy, который будет сразу эулировать работу в боевом окружении, прозрачно проксируя api запросы на нужный порт.

Answer 2

[Сергей Соколов]

Дело происходит в Chrome? Там баг, не позволяющий работать с localhost.

Попробуйте прописать в hosts любой домен, указывающий на адрес 127.0.0.1, и работать с ним.

И, разумеется, надо добавить в ответы сервера заголовок Access-Control-Allow-Origin: *