Rest 我如何从第三方网站接收本地应用程序的POST请求?

Rest 我如何从第三方网站接收本地应用程序的POST请求?,rest,graphql,apollo,vue-cli-3,vue-apollo,Rest,Graphql,Apollo,Vue Cli 3,Vue Apollo,这可能是一个奇怪的问题,但我无法从一个托管网站连接到本地跑步应用程序,该网站试图将表单发布到我的本地URL/端点。我确信这是我所缺少的一些简单的东西——或者仅仅是缺乏知识——但任何帮助都将不胜感激 其工作方式如下: 我有一个Vue Apollo应用程序正在运行,graphql服务器正在运行。当然,这仅用于开发/测试目的。最终,它将被托管 在其他人托管的第三方应用程序中,他们有一个启动服务,可以以模式(如插件)启动我的应用程序。那次启动发布了一些表单数据,我将使用这些数据来使用各种用户信息进行身

这可能是一个奇怪的问题,但我无法从一个托管网站连接到本地跑步应用程序,该网站试图将表单发布到我的本地URL/端点。我确信这是我所缺少的一些简单的东西——或者仅仅是缺乏知识——但任何帮助都将不胜感激

其工作方式如下:

  • 我有一个Vue Apollo应用程序正在运行,graphql服务器正在运行。当然,这仅用于开发/测试目的。最终,它将被托管

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

每当他们试图向我的本地主机8080客户端发帖(或者我试图通过邮递员发帖)时,它就会以404终止。我可以在服务器上发布到localhost:4000/graphql端点。所以,我想我的问题是:

  • 是否有办法在客户端接收到vue路由器端点的POST请求?我在谷歌搜索方面运气不太好
  • 如果我改为发布到graphql服务器,它将需要通过https(第三方主机环境的要求)实现。关于如何让graphql服务器通过https提供服务,我还没有找到明确的答案。那么,我如何创建一个自定义端点来接收帖子呢?我是使用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设置为什么,它都会在运行时启动服务器。我能找到的唯一其他对该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
      }
    }
    

    非常感谢您的帮助。

    我想说,最好和安全的方法是使用一个框架来处理您的POST请求,例如,或者如果您的应用程序和graphql运行在同一台服务器上,您甚至不需要使用graphql,您可以调用您的方法来处理用户数据以进行身份验证等