满口金牙 2021-10-18 18:05 采纳率: 90.4%
浏览 249
已结题

Vue 携带 token,浏览器报错

浏览器提示如下:
已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:8000/project_list 的远程资源。(原因:CORS 预检响应的 'Access-Control-Allow-Headers',不允许使用头 'token')。

django 后端不验证用户时,即不需要用token时, 就不会报这错误,
不验证用户,可以正常得到 后端数据

login.vue 交互代码, 可以正常登录. 但登录后,打开其它vue页面 从后端获取数据时, 就报上面的错误

  methods: {
    async onSubmit () {
      const { data: res } = await this.$http.post('login/', { username: this.username, password: this.password }) //, { emulateJSON: true }
      window.sessionStorage.setItem('token', res.token)  #  存token 
    }
  }

vue main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
axios.defaults.baseURL = 'http://127.0.0.1:8000/'
axios.defaults.withCredentials = false  # 这个改成True 登录会失败, 不要这行代码,也报上面的错,
axios.interceptors.request.use(config => { // 拦截器,请求头统一加 token
  if (sessionStorage.getItem('token')) {
  // 在请求头加入token
    config.headers.token = sessionStorage.getItem('token')  
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

app.use(router).mount('#app')

下面是这个后端 django auth api , 控制台 打印 token 返回None,相当后端没获取到token ,或者获取的方法不对

class Authenticate(BaseAuthentication):
    def authenticate(self, request):
        token=request.GET.get('token')
        print('@@@',token)        # 控制台输出 None
        token_obj=UserToken.objects.filter(token=token).first()
        if not token_obj:
            raise exceptions.AuthenticationFailed
        return (token_obj.user,token_obj)
    def authenticate_header(self, request):
        pass


  • 写回答

5条回答 默认 最新

查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 10月28日
  • 已采纳回答 10月20日
  • 修改了问题 10月18日
  • 修改了问题 10月18日
  • 展开全部