代理服务器(后端django框架,前端vue2如何连接)

最新推荐文章于 2024-08-26 16:38:21 发布

世伟爱吗喽

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量328

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/m0_59365887/article/details/138972386

版权

安装axios
- npm i axios

使用axios

引用axios：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

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

new Vue({
  el:'#app',
  render: h => h(App),
})

使用axios

getData(){
  this.axios.get('http://127.0.0.1:8000/api/devices/').then(
    response => {
      console.log(response.data)
    },
    error => {
      console.log(error.message)
    }
  )
}

跨域问题：

解决方案：
服务器端解决，在接口返回中添加如下代码

obj = JsonResponse({
    'code': 200,
    'msg': '获取数据成功',
    'data': result
})
obj['Access-Control-Allow-Origin'] = 'http://192.168.10.117:8080'  # 允许所有IP访问
return obj

客户端解决：代理服务器

Vue.config.js配置

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  //方式一：单代理
  devServer: {
    proxy: 'http://localhost:5000'
  }
  //方式二：多代理
  /* devServer: {
    proxy: {
      '/server1': { //前缀名
        target: 'http://localhost:5000',//目标服务器
        pathRewrite:{'^/server1':''},
        ws: true,//用于支持websocket
        changeOrigin: true//模拟服务器端口
      },
      '/server2': { //前缀名
        target: 'http://localhost:5001',//目标服务器
        pathRewrite:{'^/server2':''},
        ws: true,//用于支持websocket
        changeOrigin: true//模拟服务器端口
      }
    }
  } */
})

axios请求

getData(){
  this.axios.get('/websites').then(
    response => {
      console.log(response.data)
    },
    error => {
      console.log(error.message)
    }
  )
}

注意：当本地存在被访问的资源，不会被转发，直接返回本地资源