rest - 如何从第三方站点接收对我的本地应用程序的 POST 请求？

Question

这可能是一个奇怪的问题，但我无法从尝试将表单发布到我的本地 URL/端点的托管网站连接到本地运行的应用程序。我确信这是我遗漏的一些简单的东西——或者只是缺乏知识——但任何帮助将不胜感激。

它的工作方式是这样的:

我在 https://localhost:8080 上运行了一个 Vue Apollo 应用程序，并且graphql服务器运行在http://localhost:4000/graphql上.当然，这仅用于开发/测试目的。最终，它将被托管。

在由其他人托管的第三方应用程序中，他们有一个启动服务，它将以模式(如插件)启动我的应用程序。该启动发布了一些表单数据，我将使用这些数据来使用各种用户信息进行身份验证等。

每当他们尝试 POST(或我通过 Postman 尝试)到我的 localhost:8080 客户端时，它都会以 404 终止。我可以在服务器上 POST 到 localhost:4000/graphql 端点就好了。所以，我想我的问题是这样的:

有没有办法在客户端接收到 vue-router 端点的 POST 请求？我的谷歌搜索没有太多运气。

如果我改为 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 中，我也在那里对其进行了更改，但无济于事。我一定遗漏了一些东西——一种覆盖的方法，也许，我在文档中或通过谷歌搜索找不到。

就让我的本地应用程序从远程网站接收 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

我会说最好和安全的方法是使用像 hapi 这样的框架来处理你的 POST 请求。或 express如果你的应用程序和 graphql 运行在同一台服务器上，你甚至不需要使用 graphql 你可以调用你的方法来处理用户数据以进行身份​​验证等。