Политика Express CORs, предотвращающая выборку клиента Apollo с сервера

Question

Я использую сервер реагирования на http://localhost:3000 и экспресс-сервер на http://localhost:8080 и использую клиент Apollo для запроса к серверу. Чтобы разрешить передачу данных сеанса от клиента к серверу, я добавил параметр credentials: "include" при инициализации клиента Apollo.

Я добавил следующую строку на моем экспресс-сервере (до определения маршрутов) вconfigure cors:

app.use(cors({ credentials: true, origin: "http://localhost:3000" }));

Однако при выполнении запросов выдается следующая ошибка:

Access to fetch at 'http://localhost:8080/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Почему ответ заголовка отображается как *? Я неправильно настраиваю COR или пропускаю что-то еще?

Answer 1

Эта ошибка является ошибкой CORS, сгенерированной браузером. используйте npm install - сохраните http-proxy-middleware в своем интерфейсе и добавьте файл setupProxy.js в frontend / src / setupProxy.js

setupProxy.js

//run defferent ports for website and api server 
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api/', { target: 'http://localhost:8080/' })); //make change as per your application (So you can access your data on  http://localhost:8080/api/ )
};

Альтернативное решение

Если вы используете dev-сервер webpack, есть еще один способ прокси-запросов без внесения изменений в NodeJS. Добавление этого в package.json:

  "proxy": "http://localhost:8080"

Следует разрешить webpack для запросов прокси, сделанных от http://localhost:3000 до http://localhost:8080.

Но это будет означать, что запрос нужно будет сделать на http://localhost:3000 вместо http://localhost:8080.

Answer 2

Проблема, с которой я столкнулся, заключалась в том, что, несмотря на включение CORS для экспресс:

app.use(cors({ credentials: true, origin: "http://localhost:3000" }));

Промежуточное программное обеспечение GraphQL перекрывало настройку. Обязательно передайте параметр cors: false, как показано ниже, при использовании сервера Apollo и связанного промежуточного программного обеспечения.

gqlServer.applyMiddleware({ app, path: "/graphql", cors: false });

Answer 3

Поскольку у вас есть credentials: true, вы должны включить учетные данные в ваш вызов извлечения:

fetch(url, {
  credentials: 'include'  
})

или

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true); 
xhr.withCredentials = true; 
xhr.send(null);

Это отправит запрос с заголовками, установленными на Access-Control-Allow-Credentials: true

без этого он будет отклонен.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials