26-配置代理

配置代理

一、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)
    }
)

相关参数：

• pathRewrite：修改请求资源路径。

默认情况下，请求的资源路径会被直接转发给服务器，例如http://localhost:8080/test/students会被转发成http://localhost:5000/test/students。如果要去掉前缀test，需要在pathRewrite中使用正则表达式替换掉。

• ws：用于支持WebSocket，默认true
• changeOrigin：用于控制请求头的host，默认true

当changeOrigin为false时，代理服务器发给服务端的请求来源host为代理服务器真实的host，服务端接收到的请求来源的host为：localhost:8080

当changeOrigin为true时，代理服务器会“欺骗”服务端，用服务端的host当做请求来源host，服务端接收到的请求来源的host为：localhost:5000

一般情况下，将该项设置为true（默认值）。防止服务端加了请求来源必须为同源的限制

优点：可以配置多个代理，且可以灵活的控制请求是否走代理

缺点：配置略微繁琐，请求资源时必须加前缀

二、常用的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的使用：

1. 安装axios

npm i axios

2. 引入并使用

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

npm i vue-resource

2. 在main.js中应用插件

import vueResource from 'vue-resource'

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

3. 使用vue-resource发送请求

// 使用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请求的跨域问题，而且需要前端、后台都配合进行改造。不常用。

• 配置代理服务器

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！