Question

这可能是一个奇怪的问题，但是我无法从托管网站连接到本地运行的应用程序，而该网站试图将表单发布到我的本地URL /端点。我敢肯定，这很简单，我很想念-或者只是缺乏知识-但会有所帮助。

它的工作方式是这样的：

我有一个在https://localhost:8080上运行的Vue Apollo应用程序，而graphql服务器在http://localhost:4000/graphql上运行。当然，这仅用于开发/测试目的。最终，它将被托管。
在其他人托管的第三方应用程序中，他们具有启动服务，该服务将以模式（如插件）启动我的应用程序。那会启动POSTS一些表单数据，我将使用这些数据来消耗用户信息的各种位进行身份验证，等等。

每当他们尝试将POST（或我尝试通过Postman）发布到我的localhost：8080客户端时，它都终止于404。我可以在服务器上发布到localhost：4000 / graphql端点。所以，我想我的问题是这样的：

有没有办法在客户端接收到vue-router端点的POST请求？我在Google搜寻方面运气不佳。
如果我改用POST到graphql服务器，则需要通过https（第三方主机环境的要求）进行。我还无法找到有关如何使graphql服务器通过https服务的明确答案。然后，如何创建自定义终结点以接收POST？我要使用快速中间件，还是有更标准的方法？

这是我的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处旋转服务器。我只能在grapqhlconfig.yml中找到该URL的其他参考，并且我在那里也将其更改为无效。我一定想念一些东西-可能是一种替代方法，可能是无法在文档中或通过谷歌搜索找不到的。

即使在一般情况下，是否存在最佳实践，就我的本地应用程序而言，我缺少从远程网站接收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

I would say the best and safe way is to handle your POST request using a framework like hapi or express if you have your app and graphql running on the same server you don't even need to use graphql you can call your method that will handle the user data for authentication and etc.

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

1 个答案: