小编des*_*cne的帖子

我有一个使用以下网站的登录问题:

• Vue.js v2.0.3
• vue-router v2.0.1
• vuex v0.8.2

在routes.js我有一个简单的拦截器设置

router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!router.app.auth.isUserLoggedIn) {
        next({
            path: '/login',
            query: { redirect: to.fullPath }
        })
    } else {
        next()
    }
} else {
    next() // make sure to always call next()!
}

})

并且login.vue,在使用Google API仅用于登录成功后处理登录页面逻辑我称之为:

this.login(userData).then( 
    () => this.$router.push(this.redirectToAfterLogin), // Login success
    () => {} …

我正在使用：

• Vue 2.0.3
• Vue路由器2.0.1
• vuex 0.8.2
• vue资源0.7.0

在尝试使用远程API而不是本地运行的API登录到我的页面后，出现以下错误提示：

vue-resource.common.js?2f13:1074 OPTIONS 

https://mywebsite/api/auth/login 

(anonymous function) @     vue-resource.common.js?2f13:1074
Promise$1            @     vue-resource.common.js?2f13:681
xhrClient            @     vue-resource.common.js?2f13:1033
Client               @     vue-resource.common.js?2f13:1080
(anonymous function) @     vue-resource.common.js?2f13:1008


XMLHttpRequest cannot load https://mywebsite/api/auth/login. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:8080' is therefore not allowed 
access. The response had HTTP status code 415.

现在，我已经在Azure中运行了API，并且由于它允许我测试来自Postman的调用，因此我可以肯定在后端正确设置了CORS标头。不太确定Vue和正面。

我在配置文件中有这样的情况：

export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')

比我叫这个动作像：

login: …

在我的应用程序初始加载时，我在index.vue. 模板在这里：

<template>

  <div v-for="(season, index) in seasons" :key="index">
    {{ season.attributes.year }} 
  </div>
    
</template>
<script setup>
  const { find } = useStrapi()
  const {  data: seasons } = await find('seasons')
</script>

第一次加载和刷新时的错误是：

Unhandled error during execution of setup function at
<Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

GET http://localhost:3000/ 500 (Internal Server Error)

服务器在 localhost 上响应 500。

在我消除错误并从错误状态重新路由到“/”后，我看到了数据，这是刷新和首次加载问题。

我的猜测是该useStrapi函数必须在 onMounted 或类似的东西上被触发？（但如果可能的话，我希望它由服务器端处理）

这可能也会有帮助。我的nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/strapi'
    ],
    strapi: {
        url: process.env.STRAPI_URL || 'http://localhost:1337',
        prefix: …