在vue2中使用ajax或者是axios与django后端通信（前后端分离+跨域）

double_yellow

已于 2023-03-20 23:23:23 修改

阅读量749

点赞数

文章标签： django ajax javascript

于 2023-03-20 11:33:02 首次发布

本文链接：https://blog.csdn.net/double_yellow/article/details/129664165

版权

ajax使用jquery封装的
axios使用自定义的
与此同时如果是前后端分离的话，则还要配置代理服务器才能跨域
关于什么是跨域

前后端通信之前端

1.配置代理服务器实现跨域
2.使用jquery封装的ajax通信

1.配置代理服务器实现跨域

（1）什么是跨域请求

跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样，凡是发送请求的url的
协议、域名、端口号三者之间任意一者与当前页面地址不同的请求。
这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域（http://localhost:8000/api中http是协议，localhost是域名，8000是端口号）
注意：对于http://localhost:8080/index.html 调用http://127.0.0.1:8080/welcom.jsp，虽然localhost等同于 127.0.0.1 但是也是非同源的

（2）实现跨域

配置跨域：
https://devpress.csdn.net/viewdesign/6401a6c2986c660f3cf90fd5.html?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2_defaultCTRLIST_{activity-3-87705840-blog-105311577.pc_relevant_aa2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2}default_CTRLISTactivity-3-87705840-blog-105311577.pc_relevant_aa2&utm_relevant_index=6

1）在config文件夹下的index.js文件中的proxyTable字段中配置代理

在proxyTable中配置
pathRewrite中进行路径重写，即请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。

  dev: {
    //...
    proxyTable: {
      '/api': {
        //target:'http://api.douban.com/v2', // 你请求的第三方接口
        target:'http://127.0.0.1:8000',
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },
    //...
  }

2）如果使用axios发请求，则可以配置BaseUrl后发请求

在main.js中配置数据所在服务器的前缀（即固定部分），代码如下：

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //关键代码

使用如下代码，代理前是访问:http://localhost:8080/api/requesttest/t1/
经过代理后是访问:http://127.0.0.1:8000/requesttest/t1/

this.$axios.get('/requesttest/t1/').then(
    (response) => {
        console.log("axios.get('/requesttest/t1/').then response.data:",response.data);
        return response
    }
)

3）如果使用ajax发请求，要记得加代理中被替换的部分再发请求

4）（在我创建的第一个vue2项目中，在vue.config.js的devServer中配置）

（项目在C:\Users\86135\Desktop\vue-test\test-vue-admin）
因为没有上面的文件wwwww所以只能在别的地方改了，即修改vue.config.js中的devServer
关于vue.config.js中的devServer：
https://blog.csdn.net/leftfist/article/details/125929647

vue.config.js，就是vue项目的配置文件咯。一度传闻vue3创建项目时，默认是不提供这个文件，要用的话只能自己手动创建。但一旦创建，vue又会自动地优先使用其中的配置。
devServer算是系统的保留字，用来配置我们的开发环境，从名字也能看出来。所以，别看它里面写了这么多，又是端口，又是代理，让人一看就头大，其实只是用于我们本机开发和调试。一旦发布和打包，就与它无关了。我们将发布包部署到nginx，端口和转发，就遵循nginx的设置…

添加var webpack = require('webpack');和proxy（忘记原来是咋样了），改完是下面的样子

const { defineConfig } = require('@vue/cli-service')
var webpack = require('webpack'); 
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer:{
    host:'localhost',//本地域名
    port:8080,//本地接口
    proxy:{
      '/api':{//本地接口后跟的
        target:'http://127.0.0.1:8000',//请求地址
        changeOrigin:true,
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },
  },
  configureWebpack:{
    plugins: [
      new webpack.ProvidePlugin({ 
        $:"jquery", 
        jQuery:"jquery", 
        "window.jQuery":"jquery" 
      }) 
    ]
  },
})