Nuxt js：如何在 laravel sanctum 中使用代理？

Question

Nuxt js 注意：强烈建议使用代理以避免 CORS 和同站点策略问题。

我无法理解“target”和“pathRewrite”的用法 " 在代理中。

谁能描述一下？

如果我的后端 (laravel) URL 是 localhost:8000 而我的前端 (Nuxt) URL 是 localhost:3000 那么我应该如何配置呢？

Answer 1

您可以像这样在 NuxtJS 中使用 Axios 代理：

export default {
  axios: {
    credentials: true,
    proxy: true,
    debug: process.env.NODE_ENV !== 'production',
  },
  proxy: {
    '/api/': process.env.API_URL,
  },
  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/auth/login',
      callback: '/auth/login',
      home: '/feed',
    },
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'api', // note the URL here.
        endpoints: {
          login: {
            url: '/auth/login',
          },
          logout: {
            url: '/auth/logout',
          },
          user: {
            url: '/auth/me',
          },
        },
      },
    }
  }
}

I couldn't understand the use of "target" and "pathRewrite " in the proxy.

假设您的 API_URL 是 localhost:8000。

如果你这样写代理配置：

proxy: {
  '/api': process.env.API_URL,
},

它将在 URL 的末尾添加 /api。所以你的 API_URL 将是 localhost:8000/api。现在你可以像这样用 Axios 调用 API 请求：

this.$axios.$get('api/me');

后面会调用这个URL: localhost:8000/api/me.

如果您这样编写代理配置：

proxy: {
  '/api': {
    target: process.env.API_URL,
    pathRewrite: { '^/api': '/' }
  }
},

它将从 URL 的末尾删除 /api。所以你的 API_URL 将是 localhost:8000.

现在你可以像这样用 Axios 调用 API 请求：

this.$axios.$get('api/me');

后面会调用这个URL: localhost:8000/me.

尽情享受吧:)

Nuxt js：如何在 laravel sanctum 中使用代理？

Nuxt js: how to use proxy in laravel sanctum?

proxy

nuxtjs

laravel-sanctum