浏览器提示如下:
已拦截跨源请求:同源策略禁止读取位于 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