时间戳

首页 > 解决方案 > 如何修复从源头访问 XMLHttpRequest 已被 nuxtjs 中的 CORS 策略阻止？

vue.js - 如何修复从源头访问 XMLHttpRequest 已被 nuxtjs 中的 CORS 策略阻止？

问题描述

请求有效载荷

我正在使用 nuxt-auth 模块并使用 API 获取令牌，但我收到有关 CORS 策略的错误，我该怎么办？

我尝试了另一个用于登录和成功的 API。我有这样的错误

从源“ http://localhost:3000 ”访问“ http://blablabla.co.id/index.php/api_users/login ”处的 XMLHttpRequest已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

这是我的 nuxt.config.js ：

axios: {
 baseURL: 'http://blablabla.co.id/index.php'
},
auth: {
 redirect: {
  login: '/login',
  home: '/mainmap',
  logout: '/login'
},
strategies: {
  local: {
    endpoints: {
      login: {
        url: '/api_users/login',
        method: 'post',
        propertyName: 'token'
      },
      logout: false
    }
  }
},
token: {
  name: 'token'
},
cookie: {
  name: 'token'
}

和我的登录组件：

async login () {
    try {
      await this.$auth.loginWith('local', {
        data: {
          username: this.username,
          password: this.password
        }
      })

      this.$router.push('/')
    } catch (e) {
      console.log(e.response)
      this.error = e.response.data.error
    }
  }

来自 API 的响应是

{"status_code":400,"status_text":"BAD REQUEST","error":["username field is required","password field is required"]}

我已经调试并且用户名和密码不为空，所以任何人都可以帮助解决这个问题？

标签： vue.jsauthenticationaxiosnuxt.js

解决方案

您是否尝试过使用 axios 代理模块？

推荐阅读