vue 解决跨域问题

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

报错:

前台控制台报一下错:

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:
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小赖同学啊

感谢上帝的投喂

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值