Как получать POST-запросы к моему локальному приложению со стороннего сайта?

Question

Это может быть странным вопросом, но у меня возникают проблемы с подключением к локальному приложению с размещенного веб-сайта, который пытается отправить форму в мой локальный URL/ конечный пункт. Я уверен, что это что-то простое, что я упускаю - или просто недостаток знаний - но любая помощь будет оценена.

Вот как это работает:

• У меня есть приложение Vue Apollo, работающее по адресу https://localhost:8080/, а сервер graphql работает по http://localhost:4000/graphql. Это только для целей разработки / тестирования, конечно. В конце концов, он будет принят.

• В стороннем приложении, размещенном кем-то другим, у них есть служба запуска, которая запускает мое приложение в модальном режиме (например, в виде плагина). Этот запуск ПОСТАВЛЯЕТ некоторые данные формы, которые я использовал бы, чтобы потреблять различные биты пользовательской информации для аутентификации и т. Д.

Всякий раз, когда они пытаются POST (или я пытаюсь через Postman) на мой клиент localhost: 8080, он заканчивается на 404. Я могу POST к конечной точке localhost: 4000 / graphql на сервере. Итак, я думаю, мой вопрос заключается в следующем:

1. Есть ли способ получать запросы POST на стороне клиента к конечной точке vue-router? Мне не очень повезло с моим поиском в Google.
2. Если я вместо этого отправлю POST на сервер graphql, он должен быть через https (требование сторонней среды хоста). Я не смог найти однозначного ответа о том, как заставить сервер graphql обслуживать через https. И как мне создать пользовательскую конечную точку для получения POST? Я использую промежуточное программное обеспечение Express, или есть более стандартный метод?

Это мой vue-apollo.js:

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'

// Install the vue plugin
Vue.use(VueApollo)

// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token';
const TOKEN_TYPE = 'token-type';
const CLIENT_ID = 'client-id';
var APOLLO_CLIENT;

// Http endpoint
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql'

// Config
const defaultOptions = {
  // You can use `https` for secure connection (recommended in production)
  httpEndpoint,
  // You can use `wss` for secure connection (recommended in production)
  // Use `null` to disable subscriptions
  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000/graphql',
  // LocalStorage token
  tokenName: AUTH_TOKEN,
  // Enable Automatic Query persisting with Apollo Engine
  persisting: false,
  // Use websockets for everything (no HTTP)
  // You need to pass a `wsEndpoint` for this to work
  websocketsOnly: false,
  // Is being rendered on the server?
  ssr: false,

  // Override default apollo link
  // note: don't override httpLink here, specify httpLink options in the
  // httpLinkOptions property of defaultOptions.
  // link: myLink

  // Override default cache
  // cache: myCache

  // Override the way the Authorization header is set
  // getAuth: (tokenName) => ...

  // Additional ApolloClient options
  // apollo: { ... }

  // Client local data (see apollo-link-state)
  // clientState: { resolvers: { ... }, defaults: { ... } }
}

// Call this in the Vue app file
export function createProvider (options = {}) {
  // Create apollo client
  //console.log("CREATE PROVIDER CALLED")
  const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
  })
  apolloClient.wsClient = wsClient

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        // fetchPolicy: 'cache-and-network',
      },
    },
    errorHandler (error) {
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
    },
  })
  APOLLO_CLIENT = apolloClient;
  return apolloProvider;
}

// Manually call this when user log in
export async function onLogin (token, token_type, client_id) {
  if (typeof localStorage !== 'undefined' && token) {
    localStorage.setItem(AUTH_TOKEN, token);
    localStorage.setItem(TOKEN_TYPE, token_type);
    localStorage.setItem(CLIENT_ID, client_id);
    console.log("ON LOGIN LOCAL STORAGE ITEMS: " + '', localStorage);
  }
  if (APOLLO_CLIENT.wsClient) restartWebsockets(APOLLO_CLIENT.wsClient)
  try {
    await APOLLO_CLIENT.resetStore()
  } catch (e) {
    // eslint-disable-next-line no-console
    console.log('%cError on cache reset (login)', 'color: orange;', e.message)
  }
}

// Manually call this when user log out
export async function onLogout (apolloClient) {
  if (typeof localStorage !== 'undefined') {
    localStorage.removeItem(AUTH_TOKEN)
  }
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try {
    await apolloClient.resetStore()
  } catch (e) {
    // eslint-disable-next-line no-console
    console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
  }
}

Независимо от того, что я установил для httpEndpoint, он все равно раскручивает сервер по адресу http://localhost:4000/graphql. Единственная другая ссылка, которую я мог найти на этот URL-адрес, находится в grapqhlconfig.yml, и я также изменил его там, но безрезультатно. Должно быть, я что-то упустил - возможно, способ переопределить то, что я не могу найти в документах или путем поиска в Google.

Есть ли вообще рекомендация, что мне не хватает, чтобы получить локальное приложение для приема вызовов POST с удаленного сайта?

Я должен добавить, что я использую установку по умолчанию с настройками Vue CLI 3 и настройкой по умолчанию vue-apollo.

Вот мой vue.config.js:

module.exports = {
pluginOptions: {
    apollo: {
      enableMocks: false,
      enableEngine: false,
      // Base folder for the server source files
      serverFolder: './apollo-server',
      // Cross-Origin options
      cors: '*',
    }
  },
  devServer: {
    disableHostCheck: true,
    https: true
  }
}

Большое спасибо за любую помощь.

Answer 1

Я бы сказал, что лучший и безопасный способ - обработать ваш запрос POST, используя такую ​​среду, как hapi или express, если ваше приложение и graphql работают на одном сервере, вам даже не нужно использовать graphql, вы можете вызвать свой метод, который будет обрабатывать пользовательские данные для аутентификации и т. д.