vue 解决跨域问题

Vue.js与Django解决跨域问题

最新推荐文章于 2024-08-29 09:21:40 发布

小赖同学啊

最新推荐文章于 2024-08-29 09:21:40 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： python 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/testManger/article/details/128378680

python 专栏收录该内容

193 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文主要介绍在使用Vue.js前端框架与Django后端开发时遇到的跨域问题及其解决方案。针对Django环境，需要在settings.py中配置CORS允许跨域，并添加CORS中间件。在Vue.js端，通过封装axios并在vue.config.js中设置代理来解决跨域请求。

报错：

前台控制台报一下错：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/chouti/book/' from origin 'http://localhost:8

修改的地方有：

后端：

备注：这里采用的python django进行开发的（只适用这种环境思路可以借鉴）

Django 报错，跨域请求出现问题。

在settings.py中添加

#设置可跨域范围（注意位置）

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL = True

#定义跨域中间件（注意位置）

'corsheaders.middleware.CorsMiddleware',

前端：

备注：这里采用的是vue2进行开发，还需要特别说明的是我对axsio进行了封装

即大家常说的request.js 封装代码如下：

import Vue from 'vue'

import axios from "axios";

Vue.config.productionTip=false;
Vue.prototype.axios=axios;

const http=axios.create({
    baseURL:"http://127.0.0.1:

了解本专栏

超级会员免费看