Vue Auth-没有“访问控制允许来源”，但他在那里

Question

我想使用Vue Auth，Axios和Cakephp进行身份验证，但是我有一个众所周知的错误：

Access to XMLHttpRequest at 'http://dev.zenburo.actuelburo.local:8081/api/users/token' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我也有警告：

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://dev.zenburo.actuelburo.local:8081/api/users/token with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

问题是，我没有内容类型“ text / html”，而标题为“ Access-Control-Allow-Origin”

此外，所有其他请求都可以在此API上运行。

这是我的代码：

Axios实例（@ / api）：

import axios from 'axios'

export default axios.create({
    baseURL: 'http://dev.zenburo.actuelburo.local:8081/api/',
    timeout: 5000,
    headers: {
        'Access-Control-Allow-Origin': 'http://localhost:8080/',
        'Content-Type': 'application/json',
        'Access-Control-Expose-Headers': 'Access-Token',
        'Access-Control-Allow-Credential': 'true',
    }
});

Vue身份验证配置（@ / auth）：

import bearer from '@websanova/vue-auth/drivers/auth/bearer'
import axios from '@websanova/vue-auth/drivers/http/axios.1.x'
import router from '@websanova/vue-auth/drivers/router/vue-router.2.x'

const config = {
    auth: bearer,
    http: axios,
    router: router,
    loginData: {
        url: '/users/token',
        redirect: '/dashboard',
        method: 'POST',
    }
};

export default config

main.js：

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import VueRouter from 'vue-router'
import router from './routes'
import api from '@/api'
import VueAxios from 'vue-axios'
import auth from './auth'
import VueAuth from '@websanova/vue-auth'
import Index from './views/Index'
import ECharts from 'vue-echarts'
import store from './store'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts-gl'


window.Vue = Vue;
Vue.router = router

Vue.component('v-chart', ECharts);
Vue.config.productionTip = false;
Vue.use(VueRouter);

Vue.use(VueAxios, api);

Vue.use(VueAuth, auth);

new Vue({
    vuetify,
    store,
    render: h => h(Index),
    router,
}).$mount('#app');

最后是login.vue：

<template />

<script>
 export default {
        name: "Login",
        data() {
            return {
                account: '',
                password: '',
            }
        },
        methods: {
            login() {
                let self = this
                this.$auth.login({
                    body: {username: self.account, password: self.password},
                    method: 'POST',
                    rememberMe: true,
                    success: function () {
                        console.log('ok');
                    },
                    error: function (error) {
                        console.log(error)
                    },
                })
            }
        }
    }
<script/>

这是没有缓存的网络：

这是客户端还是服务器端的问题？ （我重复一遍：除auth之外的所有其他方法都有效；因此我对此表示怀疑）

有人可以解决吗？

预先感谢您的帮助

Answer 1

实际上，@ Gander的注释非常准确。

这是预检请求（通过OPTIONS）的问题。

它经常在您调用本地API时发生。

Answer 2

首先，您要混合使用请求标头和响应标头。例如Access-Control-Allow-Origin应该只是一个响应标头，但是您将同时发送它。确保您清楚它们之间的区别，然后检查每个标头以确保以正确的方向发送它。

接下来，在第二张图片中，它清楚地表明响应的Content-type为text/html，与第二条错误消息一致。我再次强调，了解请求标头和响应标头之间的区别很重要。该请求也有一个Content-type设置，但这是完全独立的。

另一个错误消息指出Access-Control-Allow-Origin标头丢失。请记住，这是一个响应标头，如果将其设置为请求标头，则不计算在内。在第一张图片中，对于飞行前OPTIONS请求，该标头存在，因此一切都很好。然后，它尝试POST请求，但是这次响应不包含该标头或任何其他CORS标头。

鉴于您的其他请求正在运行，建议您与其他请求进行对比。我怀疑您会发现这些请求包含Access-Control-Allow-Origin response 标头。

Answer 3

问题：响应服务器端。

您必须返回带有Access-Control-Expose-Headers的响应

header("Authorization: 'YOURTOKEN'");