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

Posted 2023-02-22

【中文标题】Vue Auth - 没有“访问控制允许来源”，但他在那里

【英文标题】：Vue Auth - No 'Access-Control-Allow-Origin' but he is there

【发布时间】：2020-03-18 19:03:52

【问题描述】：

我想使用 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/>

这是没有缓存的网络：

这是客户端还是服务器端的问题？ （我再说一遍：除了身份验证之外的所有其他方法都有效；所以我有疑问）

有人有解决办法吗？

提前感谢您的帮助

【问题讨论】：

预检请求怎么样？选项？效果好吗？

@AlexisGatuingt，这些标头应该出现在您的 api 的响应中，您的 api 告诉您的浏览器允许客户端网站向您的 api 发出该请求。这是您的api and browser（称为预检）之间的对话。

【参考方案1】：

问题：响应服务器端。

您必须使用 Access-Control-Expose-Headers 返回响应

header("Authorization: 'YOURTOKEN'");

【讨论】：

两天后，我终于找到了你的答案，并在我的 .htaccess 中添加了 Header set Access-Control-Expose-Headers "Authorization" 非常感谢

嗨@migli！您能否指出我如何在 htaccess 上配置此授权？

这是一个示例代码：<IfModule mod_headers.c> Header set Access-Control-Expose-Headers "Authorization" </IfModule>

【参考方案2】：

确实，@Gander 的评论非常准确。

是preflight request的问题（传入OPTIONS）。

当您调用本地 API 时经常会发生这种情况。

【参考方案3】：

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

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

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

鉴于您的其他请求正在发挥作用，我建议您将此与其他请求进行对比。我怀疑您会看到这些请求存在 Access-Control-Allow-Origin response 标头。