Это может быть странный вопрос, но у меня возникают проблемы с подключением к локально запущенному приложению с размещенного веб-сайта, который пытается отправить форму в мой локальный URL / конечную точку. Я уверен, что это что-то простое, что я упускаю - или просто недостаток знаний - но любая помощь будет оценена.
Вот как это работает:
У меня есть приложение Vue Apollo, работающее на https://localhost:8080,, а сервер graphql работает на http://localhost:4000/graphql. Разумеется, это только для целей разработки / тестирования. В конце концов, он будет размещен.
В стороннем приложении, размещенном кем-то другим, у них есть служба запуска, которая запускает мое приложение в модальном режиме (например, в виде плагина). Этот запуск ПОСТАВЛЯЕТ некоторые данные формы, которые я буду использовать для аутентификации различных битов пользовательской информации и т. Д.
Всякий раз, когда они пытаются POST (или я пытаюсь через Postman) на мой localhost: 8080 clientide, он заканчивается 404. Я могу POST к конечной точке localhost: 4000 / graphql, просто отлично на сервере. Итак, я думаю, мой вопрос таков:
- Есть ли способ получать POST-запросы на стороне клиента к конечной точке vue-router? Мне не очень повезло с моим поиском в Google.
- Если я вместо этого отправлю 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
}
}
Большое спасибо за любую помощь.