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

Question

request payload

iam 使用 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"]}

我已经调试过了，用户名和密码不为空，所以有人可以帮忙解决这个问题吗？

Answer 1

响应没有显示任何类似 CORS 的错误。响应状态码是 400。如果是 CORS 错误，您只会在 HTTP 端收到错误。

请检查您的请求负载。如果可能，请发布请求有效负载的屏幕截图。

Answer 2

你试过使用 axios 代理模块吗？