axios请求跨域前端解决_Vue - 仓库、axios前后台交互及跨域问题

Vuex仓库

概念

vuex仓库是vue全局的数据仓库，好比一个单例，在任何组件中通过this.$store来共享这个仓库中的数据，完成跨组件间的信息交互。相当于一个临时的仓库，会在浏览器刷新后重置

使用

// store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

// 设置任何组件都能访问的共享数据

course_page:''

},

mutations: {

// 通过外界的新值来修改仓库中的共享数据的值

UpdateCoursePage(state,new_page){

// 只能接收两个参数

state.course_page=new_page

}

},

actions: {}

})

// 仓库共享数据的获取与修改：在任何组件的逻辑中

// 获取

let cour_page = this.$store.state.course_page

// 直接修改

this.$store.state.course_page = '新值'

// 方法修改

this.$store.commit('UpdateCoursePage','新值')

axios前后台交互

安装：在前端项目目录下的终端

npm install axios --save

配置：main.js

// 配置axios，完成ajax请求

import axios from 'axios'

Vue.prototype.$axios = axious;

使用：组件的逻辑方法中

created(){ // 组件创建成功的钩子函数

// 拿到要访问课程详情的课程id

let id = this.$route.params.pk || this.$route.query.pk||1

this.$axios({

url:`http://127.0.0.1:8000/course/detail/${id}`, // 后台接口

method:'POST', // 请求方式

}).then(response => { // 请求成功

console.log('请求成功')

console.log(response)

this.course_ctx = response.data; // 将后台数据赋值给前台变量完成页面渲染

}).catch(error =>{ // 请求失败

console.log('请求失败')

console.log(error)

})

}

跨域问题

原理

后台服务器默认只为自己的程序提供数据，其它程序来获取数据，都可能跨域问题

一个运行在服务上的程序，包含：协议、ip、端口，所以有一个成员不相同都是跨域问题。出现跨域问题，浏览器会抛出 CORS 错误

django解决跨域问题

1)安装插件

pip install django-cors-headers

2)配置settings.py文件

# 注册app

INSTALLED_APPS = [

'corsheaders'

]

# 添加中间件

MIDDLEWARE = [

'corsheaders.middleware.CorsMiddleware'

]

# 允许跨域源，True表示允许所有跨域源

CORS_ORIGIN_ALLOW_ALL = False

# 设置白名单，允许跨域的白名单

CORS_ORIGN_WHITELIST = [

# 本机建议就配置127.0.0.1，127.0.0.1不等于localhost

'http://127.0.0.1:8080',

'http://localhost:8080',

]

原文：https://www.cnblogs.com/863652104kai/p/11443750.html