vue_2 --- 发送 ajax 请求

1. 解决跨域

1.1 cors

需要服务器返回特殊的响应头

1.2 jsonP

利用的是script标签的src属性,引用外部资源时不受同源策略的影响,但是只对GET请求有用,POST、PUT等没用

1.3 配置代理服务器

代理服务器的协议://服务器地址:端口,都与前端项目保持一致,前端项目发送请求给代理服务器,代理服务器向后端服务器使用http请求获取数据(不受同源策略管辖),然后获取数据返回给前端项目

1. nginx

使用nginx作为代理服务器

2. vue-cli

1. 官方文档配置

https://cli.vuejs.org/zh/config/#devserver-proxy

方式一: 配置一个代理

1. 项目根路径下 创建 vue.config.js 文件,添加开启代理服务器的配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 1. 开启代理服务器
  devServer: {
    // proxy为后端目标服务器,默认为根路径
    proxy: 'http://localhost:5000'
  }
})

2. 重新启动vue项目

npm run serve

3. 什么情况下请求不会转发

当vue项目中本身就有请求的资源路径,即public文件夹下的资源

4. 不能配置多个代理服务器

方式二: 配置多个代理

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 1. 开启代理服务器
  devServer: {
    // 配置多个代理
    proxy: {
      // http://localhost:8080/api 请求这个后端目标服务器
      '/api': {
        target: 'http://localhost:5000',
        pathRewrite:{"^/api":""},   // 重写路径,将/api替换为空,默认是请求的后端服务器的 /api
        ws: true,  // 是不是支持websocket请求,默认为true
        changeOrigin: true  // 用于控制请求头中的host值是否替换为目标服务器IP地址和端口,默认为true
      },
      // http://localhost:8080/foo 请求这个后端目标服务器
      '/foo': {
        target: 'http://localhost:5001'
        pathRewrite:{"^/foo":""},   // 重写路径,将/foo替换为空,默认是请求的后端服务器的 /foo
      }
    }
  }
})

配置完成后重启vue项目

npm run serve

给 5000 端口发送请求

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>
// 1. 导入axios
import axios from "axios";

export default {
  name: 'school-info',
  methods: {
    getStudents() {
      // 2. http://localhost:8080/api/students 就是根据代理服务器配置的前缀往对应的服务器发送请求
      // 如果配置了pathRewrite就是发送给了http://localhost:5000/students
      // 如果没有配置pathRewrite就是发送给了http://localhost:5000/api/students
      axios.get("http://localhost:8080/api/students").then(
          response => {
            console.log("返回的数据: ", response.data)
          },
          error => {
            console.log("失败原因: ", error.message)
          }
      )
    }
  }
}
</script>

给 5001 端口发送请求

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>
// 1. 导入axios
import axios from "axios";

export default {
  name: 'school-info',
  methods: {
    getStudents() {
      // 2. http://localhost:8080/foo/cars 就是根据代理服务器配置的前缀往对应的服务器发送请求
      // 如果配置了pathRewrite就是发送给了http://localhost:5001/students
      // 如果没有配置pathRewrite就是发送给了http://localhost:5001/foo/students
      axios.get("http://localhost:8080/foo/cars").then(
          response => {
            console.log("返回的数据: ", response.data)
          },
          error => {
            console.log("失败原因: ", error.message)
          }
      )
    }
  }
}
</script>

2. axios(推荐)

2.0 官网地址

http://www.axios-js.com/

2.1 安装

npm install axios

2.2 使用

1. 发送GET请求

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>
// 1. 导入axios
import axios from "axios";

export default {
  name: 'school-info',
  methods: {
    getStudents() {
      // 2. 发送GET请求,请求服务器为代理服务器的ip地址和端口,即vue项目运行的IP地址和端口,解决跨域
      axios.get("http://localhost:8080/api/students").then(
          // 请求成功的回调函数,response为响应成功对象,response.data为真实数据
          response => {
            console.log("返回的数据: ", response.data)
          },
          // 请求成功的回调函数,error为响应错误对象,error.message为真实错误信息
          error => {
            console.log("失败原因: ", error.message)
          }
      )
    }
  }
}
</script>

<style>

</style>

3. vue-resource插件

3.1 安装

npm install vue-resource

3.2 导入

main.js

import Vue from 'vue'
import App from './App.vue'
// 1. 导入
import vueResource from "vue-resource";

Vue.config.productionTip = false

// 2. 使用插件
Vue.use(vueResource)

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

3.3 使用

只要引入了vue-resource, vm和vc的实例对象上就会有 $http

1. 发送GET请求

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>

export default {
  name: 'school-info',
  methods: {
    getStudents() {
      // 使用 this.$http.get() 发送请求
      this.$http.get("http://localhost:8080/api/students").then(
          response => {
            console.log("返回的数据: ", response.data)
          },
          error => {
            console.log("失败原因: ", error.message)
          }
      )
    }
  }
}
</script>

<style>

</style>