Как сделать кроссдоменный запрос локально?

Question

[historydev]

Добрый день. Скажите пожалуйста, как почему не работает и как исправить?

server:

app.post('/?isAuth', (req, res) => {

   let state = {
       value: req.isAuthenticated()
   };

   console.log(state);

   res.send(JSON.stringify(value))

});

client:

export default async function userState() {

    const response = await fetch('http://localhost:4000/?isAuth', {
        method: 'POST',
        header: {
            'Access-Control-Allow-Origin': 'http://127.0.0.1:3000',
            'Access-Control-Allow-Methods': 'POST',
            'Access-Control-Allow-Headers': 'Content-Type, Authorization'
        }
    });
    const state = true;

    console.log(response);

    return state

}

Ошибка:

Access to fetch at 'localhost:4000/?isAuth' from origin 'localhost:3000' 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.
userState.js:3 POST localhost:4000/?isAuth net::ERR_FAILED
userState @ userState.js:3
./src/components/lowLvlComponents/form/formRouter.js @ formRouter.js:25
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/lowLvlComponents/form/authenticateBox.js @ header.js:17
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/lowLvlComponents/userBar/userBar.js @ topbar.js:24
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/lowLvlComponents/topBar/topbar.js @ textBoxes.js:27
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/header/header.js @ content.js:38
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/App.js @ variables.css:10
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/index.js @ index.css?38d2:43
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
1 @ index.js:15
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
userState.js:15 Uncaught (in promise) TypeError: Failed to fetch
async function (async)
userState @ userState.js:3
./src/components/lowLvlComponents/form/formRouter.js @ formRouter.js:25
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/lowLvlComponents/form/authenticateBox.js @ header.js:17
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/lowLvlComponents/userBar/userBar.js @ topbar.js:24
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/lowLvlComponents/topBar/topbar.js @ textBoxes.js:27
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/header/header.js @ content.js:38
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/components/App.js @ variables.css:10
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/index.js @ index.css?38d2:43
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
1 @ index.js:15
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
localhost/:1 Access to fetch at 'localhost:4000/?isAuth' from origin 'localhost:3000' 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.
userState.js:3 POST localhost:4000/?isAuth net::ERR_FAILED
userState @ userState.js:3
Authenticate @ formRouter.js:32
renderWithHooks @ react-dom.development.js:16260
mountIndeterminateComponent @ react-dom.development.js:18794
beginWork$1 @ react-dom.development.js:20162
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24698
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
(anonymous) @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
./src/index.js @ index.js:6
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
1 @ index.js:15
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
userState.js:15 Uncaught (in promise) TypeError: Failed to fetch
async function (async)
userState @ userState.js:3
Authenticate @ formRouter.js:32
renderWithHooks @ react-dom.development.js:16260
mountIndeterminateComponent @ react-dom.development.js:18794
beginWork$1 @ react-dom.development.js:20162
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24698
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
(anonymous) @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
./src/index.js @ index.js:6
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
1 @ index.js:15
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
localhost/:1 Access to fetch at 'localhost:4000/?isAuth' from origin 'localhost:3000' 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.
userState.js:3 POST localhost:4000/?isAuth net::ERR_FAILED
userState @ userState.js:3
Authenticate @ formRouter.js:32
renderWithHooks @ react-dom.development.js:16260
mountIndeterminateComponent @ react-dom.development.js:18794
beginWork$1 @ react-dom.development.js:20162
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24698
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
(anonymous) @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
./src/index.js @ index.js:6
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
1 @ index.js:15
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
userState.js:15 Uncaught (in promise) TypeError: Failed to fetch

Answer 1

[Дмитрий Беляев]

Access-Control-Allow-* заголовки должен отправлять сервер, а не клиент

Comments

[historydev]

Ошибка идентична

res.setHeader('Access-Control-Allow-*', '*');
res.send(state)

[historydev]

Выгуглил такую штуку, вроде пропала ошибка, а данные не приходят, интересно почему ...

UPD: Убрал знак вопроса и заработало.

let cors = require('cors');

// use it before all route definitions
app.use(cors({origin: '*'}));