Vue中发送Ajax请求的方式axios及其跨域问题的解决方案代理机制的配置和原理

Vue中的Ajax请求

现在比较流行的开发方式为异步调用,前后台以异步Ajax请求的方式进行交换数据,传输的数据使用的是JSON

• Ajax请求发送后,当浏览器接收到服务器的响应内容后不会重新加载整个页面,只会更新网页的部分实现局部刷新的效果

发送AJAX异步请求的常见方式包括

• 使用浏览器内置的JS对象XMLHttpRequest
• 使用浏览器内置的JS函数fetch如fetch(‘url’, {method : ‘GET’}).then().then()
• 第三方库方式: 对XMLHttpRequest进行封装,如jQuery提供的$.get()/post()方法,基于Promise的HTTP库axios提供的axios.get().then()

axios

使用vue-cli安装axios库npm i axios,然后在组件中使用import导入axios import axios from 'axios'

使用vue.js提供的axios方法发起Ajax请求,方法的参数是一个配置对象

• method: 指定请求的方式
• url: 指定请求的路径
• params和data: 指定请求的参数,参数是一个对象

params和data属性的区别

• 使用params属性时无论发送GET还是POST请求,请求参数都是以name=value&..的格式拼接到请求地址后,获取请求参数时通过requset对象的API
• 使用data属性时,只能发送POST请求,且参数是以json格式存储到请求报文的请求体中,获取请求参数时需要相关的jar包将请求体中的json数据转成Java对象

使用axios({配置对象}).then(回调函数)方法发起Ajax请求

• 使用params属性将请求参数以name=value&name=value的格式拼接到请求地址后

// 导入axios
import axios from 'axios'
testAjax:function (event) {
    axios({
        method:"post",
        url:event.target.href,
        params:{
            username:"admin",
            password:"123456"
        }
    }).then(function (response) {//服务器处理Ajax请求成功后执行的回调函数
        // 服务器响应的结果都会被封装在response对象中,响应的数据都在data属性中
        alert(response.data);
    });

使用axios.post(url,[data]).then(回调函数)方法和axios.get(url).then(回调函数)方法发起Ajax请求

• 使用data属性将请求参数以json的格式存储到请求报文的请求体中

testAjax(){
    axios.post(
        "/SpringMVC/test/ajax",
        {username:"admin",password:"123456"}
    ).then(response=>{
        console.log(response.data);
    });
},

vue-resource插件

安装vue-resource插件npm i vue-resource,然后在main.js文件中导入插件并使用,此时项目中所有的vm和vc实例上都添加了$http属性

import Vue from 'vue'
import App from './App.vue'
// 导入插件vue-resource
import vueResource from 'vue-resource'
Vue.config.productionTip = false

// 使用插件,此时项目中所有的vm和vc实例上都添加了$http属性
Vue.use(vueResource)
new Vue({
  el : '#app',
  render : h => h(App)
})

使用vue-resource插件发送请求的用法和axios相同this.$http.get(‘’).then()

export default {
    name : 'App',
    data() {
        return {
            bugList : []
        }
    },
    // 在mounted钩子中发送ajax请求将响应的数据保存到bugList数组当中
    mounted() {
        // 使用vue-resource插件来发送AJAX请求
        this.$http.get('/api/vue/bugs').then(
            response => {
                console.log('响应数据：', response.data)
                this.bugList = response.data
            },
            error => {
                console.log('错误信息为：', error.message)
            }
        )
    },

Ajax跨域问题

参考文章Ajax跨域问题及其解决方案

启用Vue脚手架内置服务器

Vue脚手架内置了一个服务器端口号是8080,默认是没有开启代理功能的

我们需要在vue.config.js文件中添加配置开启vue-cli的代理机制,修改完配置文件需要重启服务器, 此时Vue会在服务器内部生成一个小程序

// 简单配置不支持配置多个代理
devServer: {
    // Vue脚手架内置的8080服务器负责代理访问8000服务器,到时候将资源直接拼接到端口后面
    proxy: 'http://localhost:8000' 
}

高级配置: 支持配置多个代理

 devServer: {
    proxy: {
       // 只代理以'/api'开始的资源(请求路径) 
      '/api': {
        target: 'http://localhost:8000',
		// URL重写,将路径中的'/api'以''代替,然后再将重写后的请求路径拼接到目标服务器的端口号后面
        pathRewrite: {'^/api' : ''},
        ws: true,
        changeOrigin: true
      },
      // 只代理以'/abc'开始的资源(请求路径) 
	  '/abc': {
        target: 'http://localhost:8001',
        pathRewrite: {'^/abc' : ''},
        // 默认值true,开启对websockt的支持(一种实时推送技术),
        ws: true,
        // 默认值true,改变起源让目标服务器不知道我们真正的起源在哪里,此时目标服务器获取到的是自己端口的起源
        changeOrigin: true
      }
       // 代替以'/'开始的资源即所有资源 
      '/': {
          
      }  
    }
  }

发送AJAX请求的时候会优先从自己的服务器当中找/vue/bugs资源(资源可能是静态的或动态的Java程序),如果找不到才去代理服务器上找对应的资源

<script>
    import axios from 'axios'
    export default {
        name : 'Bugs',
        methods: {  
            getBugs(){
                // http://localhost:8080/vue/bugs-->http://localhost:8000/vue/bugs
                /* axios.get('/vue/bugs').then(
                    response => {
                        console.log('服务器响应回来的数据：', response.data)
                    },
                    error => {
                        console.log('错误信息：', error.message)
                    }
                ) */
                
                // 当前按钮这个页面就是在8080服务器上，所以访问当前服务器上的资源时http://localhost:8080可以省略
			   // 先访问本地资源http://localhost:8080/api/vue/bugs---->重写URL删除'/api'(以空字符串代替)-->http://localhost:8000/vue/bugs
                axios.get('/api/vue/bugs').then(
                    response => {
                        console.log('服务器响应回来的数据：', response.data)
                    },
                    error => {
                        console.log('错误信息：', error.message)
                    }
                )
            }
            
            // http://localhost:8080/api/user/bugs-->重写URL删除'/abc'(以空字符串代替)-->http://localhost:8000/vue/users
            getUsers(){
                axios.get('/abc/vue/users').then(
                    response => {
                        console.log('服务器响应回来的数据：', response.data)
                    },
                    error => {
                        console.log('错误信息：', error.message)
                    }
                )
            },
            
        },
    }
</script>