После предварительной проверки (cors) запрос сервера изменяется на * и хром не отображает запрос (но я смотрю тело ответа).Как решить проблему? - PullRequest
Новая
       14

После предварительной проверки (cors) запрос сервера изменяется на * и хром не отображает запрос (но я смотрю тело ответа).Как решить проблему?

0 голосов
/ 05 марта 2019

После начала предпросмотра (cors) запрос сервера изменяется на * и chrome не отображает запрос (но я смотрю тело ответа).

Заголовки запроса

Ошибка Chrome:

Access to fetch at 'http://localhost:6529/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'.

Я использую экспресс, cors, graphql, apollo на бэкэнде и реагирую на фронтэнд.

Конфигурация Cors (бэкэнд): 

app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true,
    maxAge: 86400,
    optionsSuccessStatus: 200,
    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'].join(','),
}));

Конфигурация заголовков (фронтенд) 

const credentials = "include";

let client: ApolloClient<NormalizedCacheObject> | null = null;

export function createClient(cookie: any, ctx: any, store: any): ApolloClient<NormalizedCacheObject> {
  storage.setItem("ctx", ctx);
  client = new ApolloClient({
    cache,
    link: ApolloLink.from([
          onError(({graphQLErrors, networkError}) => {
            if (graphQLErrors) {
              if (!SERVER) {
                const redirectUrl = getRedirect(graphQLErrors);
                if (redirectUrl) {
                  location.assign(redirectUrl);
                }
              }
              graphQLErrors.map(({message, locations, path}) => {
                console.log(
                    `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
                );

              });
            }
            if (networkError) {
              console.log(`[Network error]: ${networkError}`);

            }
          }),
          new ReduxLink(store),
          new BatchHttpLink({
            credentials,
            uri: GRAPHQL,
            headers: cookie,
            fetchOptions: {
              withCredentials: true,
              credentials,
            },
          }),
        ],
    ),
    ssrMode: SERVER,
    connectToDevTools: true,
  });
  return client;
}

Как решить проблему?

1 Ответ

0 голосов
/ 05 марта 2019

Я сам прошел через проблему, и это был кошмар.Причина, по которой он не работает, заключается в том, что в заголовке CORS должно быть ..http://localhost:3000 не соответствует этой квалификации.

Я решил эту проблему, зайдя в файл моего хоста (на Mac: /etc/hosts) и перенаправив фиктивный домен, такой как api.myapp.local, на 127.0.0.1 (локальный).Затем я перенаправил свой интерфейс на app.myapp.local.Так что теперь, когда сделан запрос CORS, он составляет от http://app.myapp.local:3000 до http://api.myapp.local:3001, и он удовлетворяет этому требованию.Домен можно называть как угодно.

...