Reputation: 11
How can I run third party API in nuxt2? This is my nuxt.config.js
setup , I tried to use proxy also not working or I need to setup something? I am new to Nuxt.
import colors from 'vuetify/es5/util/colors.js'
import path from 'path'
export default {
mode: 'universal',
devtools: true,
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
{ 'http-equiv': 'Cache-Control', content: 'no-store, no-cache, must-revalidate' },
{ 'http-equiv': 'Pragma', content: 'no-cache' },
{ 'http-equiv': 'Expires', content: '0' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
alias: {
'@': '~/'
},
plugins: [
{ src: '~/plugins/index.js' },
{ src: './plugins/plugin/i18n.js' },
{ src: './plugins/plugin/axios.js' },
],
router: {
middleware: 'authMiddleware',
extendRoutes(routes, resolve) {
// Define your custom routes
const customRoutes = [
{ path: '/', name: '', component: resolve(path.resolve('pages/index.vue')) },
{ path: '/login', name: 'login', component: resolve(path.resolve('pages/merchant/views/auth/login.vue')) },
{ path: '/account', name: 'account', component: resolve(path.resolve('pages/merchant/views/account/index.vue')) },
{ path: '/report', name: 'report', component: resolve(path.resolve('pages/merchant/views/report/index.vue')) },
];
routes.push(...customRoutes);
}
},
components: true,
buildModules: [
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
'@nuxtjs/device',
],
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy',
'@nuxtjs/toast',
'@nuxtjs/auth-next'
],
toast: {
position: 'top-center',
duration: 2000
},
auth: {
redirect: {
login: "/login",
logout: "/",
},
strategies: {
local: {
token: {
property: 'data.token',
required: true,
type: 'Bearer',
global: true,
},
user: {
property: 'data.user',
autoFetch: true,
},
endpoints: {
login: { url: '/api/auth/login', method: 'post' },
logout: { url: '/api/auth/logout', method: 'post' },
user: { url: '/api/auth/me', method: 'get' },
},
},
},
},
store: '~/store',
image: {
dir: 'assets/images'
},
serverMiddleware: [
{ path: '/api', handler: '~/server-middleware/api.js' }
],
axios: {
proxy: true,
baseURL: process.env.BASE_URL || 'http://localhost:3000',
credentials: true,
},
proxy: {
'/api/': {
target: 'https://abctestapi.com', // Your API endpoint
pathRewrite: { '^/api/': '' },
changeOrigin: true
}
},
}
I got a CORS error whenever I call the login
endpoints in the auth not sure whether I setup it correctly?
Upvotes: 0
Views: 95