React + Express CORS error 400 Bad Request - PullRequest
Новая
       9

React + Express CORS error 400 Bad Request

0 голосов
/ 25 апреля 2019

Я пытаюсь сделать асинхронные запросы от приложения React к бэкэнду Express. Но я получаю обычную «проблему CORS: неправильный запрос»:

Imagen

Мне известен плагин CORS для Express, поэтому я установил cors из Node Plugin Manager и применил к своему бэкэнду index.js, например: 

...
import express from 'express';
import cors from 'cors';
...

const app = express();
...

const whitelist = [
  'http://localhost:3000'
]
const corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

app.use(cors(corsOptions));
...

app.listen(4000, () => console.log('server running on port 4000);

Итак, я попытался с помощью Fecth API получить данные с внутреннего сервера: 

class Component extends React.Component {
  render() {
    const { componentId } = this.props.match.params;

    (async () => {
      const query = `
        query {
          getComponent(id: "${componentId}") {
            type
          }
        }
      `;

      const options = {
        method: 'POST',
        body: JSON.stringify(query)
      };

      const component = await fetch('http://localhost:4000/graphql', options);

      console.log(component);
    })();

    return (
      <h1>Hola</h1>
    );
  }
}

export default Component;

Я также пытался установить headers: { 'Content-Type': 'application/json }, mode: cors и crossOrigin на true.

Я получаю одну и ту же ошибку каждый раз при любой конфигурации. Любые комментарии приветствуются.

1 Ответ

0 голосов
/ 25 апреля 2019

В среде dev вы можете добавить прокси в файл package.json: "прокси": "http://localhost:4000"

Ваш package.json должен выглядеть так: 

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
 },
  "proxy": "http://localhost:4000",
  "eslintConfig": {
    "extends": "react-app"
  },

Как уже было сказано, Chrome не позволяет делать запросы при использовании домена localhost. При использовании прокси все, что не является изображением, css, js и т. Д., Будет рассматривать прокси. Поэтому, когда вы сделаете запрос, просто используйте fetch ('/ graphql'), без домена .

https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

...