Vue脚手架配置代理

可以配制出一个代理服务器，用于解决跨域问题。

代理服务器的端口号和Vue端口号相同，所以访问代理服务器时不存在跨域问题。

方法一：

在vue.config.js中添加配置：

devServer: {
    proxy:'http://localhost:5000'
}

页面中本来请求5000端口服务器的url改为请求8080代理服务器（vue端口号是8080，代理服务器端口号和vue端口号相同）：

// 原本要请求localhost:5000/students，现在发给代理服务器localhost:8080
axios.get('http://localhost:8080/students').then(
    response => {
        console.log('请求成功了', response.data)
    },
    error => {
        console.log('请求失败了', error.message)
    }
)

优点：配置简单，请求资源时直接发送给前端8080端口即可

缺点：不能配置多个代理，不能灵活的控制请求是否走代理

工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器。优先匹配项目中已有的资源，例如http://localhost:8080/favicon.ico获取到的是本地的文件，而不会转发给服务器。

方法二：

在vue.config.js中添加配置：

devServer: {
    proxy: {
        '/test': {  // 请求前缀
            target: 'http://localhost:5000',
            pathRewrite: {'^/test': ''},   // 请求服务器时去掉/test前缀
            ws: true,  // 用于支持WebSocket，默认true
            changeOrigin: true  // 用于控制请求头的host值，默认true
        },
        '/demo': {  
            target: 'http://localhost:5001',
            pathRewrite: {'^/demo': ''},   
            ws: true,  
            changeOrigin: true 
         },
    }
}

页面中请求路径需要加上指定的前缀：

// 请求localhost:8080/test 会被转发给localhost:5000
axios.get('http://localhost:8080/test/students').then(
    response => {
        console.log('请求成功了', response.data)
    },
    error => {
        console.log('请求失败了', error.message)
    }
)

常用的ajax技术对比

常用的ajax技术：

xhr（XMLHttpRequest）：原生window自带的对象，可以直接使用。但是用法繁琐，很少使用
Jquery：可以使用$.get、$.post进行ajax操作，但Jquery中大部分工作是便于操作DOM，而Vue中要尽量避免DOM操作，所以VUE中不推荐使用Jquery
axios：封装的promise风格的ajax请求，需要引入axios库。最常用。
fetch：也可以使用promise风格的ajax请求。fetch是js内置的，不依赖xhr。但是fetch会将返回的数据包装两层promise，而且不兼容IE浏览器。
vue-resource：vue的插件，用法和axios完全一样，但是很久没有维护了，在vue1.0时代用的较多

axios的使用：

安装axios
```
npm i axios
```
引入并使用
```javascript import axios from ‘axios’

axios.get(‘http://localhost:8080/students').then( response => { console.log(‘请求成功了’, response.data) // 响应数据存在response的data属性中 }, error => { console.log(‘请求失败了’, error.message) // 错误信息存在error的message属性中 } )


vue-resource的使用：
1.  安装vue-resource  
```sh
npm i vue-resource

在main.js中应用插件
```javascript import vueResource from ‘vue-resource’

// 使用该插件后，vm和vc对象都会多出来一个$http属性 Vue.use(vueResource)


3.  使用vue-resource发送请求  
```javascript
// 使用vue-resource插件后，vm和vc会多出来$http属性
// 使用$http发送请求和使用axios发送请求的写法一模一样
this.$http.get('http://localhost:8080/students').then(
    response => {
        console.log('请求成功了', response.data)
    },
    error => {
        console.log('请求失败了', error.message)
    }
)

常用解决跨域的方法

常用的解决跨越的方法：

cors：不需要前端做任何操作。需要在后台代码中，将响应头添加几个特殊响应头
jsonp：巧妙的借助了<script>标签的src属性在引入外部资源时不受同源策略限制的特点办到的。只能解决get请求的跨域问题，而且需要前端、后台都配合进行改造。不常用。
配置代理服务器

前端笔记

26-配置代理

Vue脚手架配置代理

常用的ajax技术对比

常用解决跨域的方法