26-配置代理

墨蓝 2023-10-08 18:16 24阅读 0赞

## **配置代理** ##

#### 一、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：可以使用 . g e t 、 .get、 .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

1.  引入并使用

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

1.  在main.js中应用插件

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

1.  使用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请求的跨域问题，而且需要前端、后台都配合进行改造。不常用。
 *  配置代理服务器

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