vue脚手架配置代理器解决Ajax请求跨域问题

常用的发送Ajax请求方式：

1. xhr：new XMLHttpRequest()
2. jQuery(封装xhr)(太大)
3. axios(封装xhr)(相对好用)
4. fetch（IE浏览器兼容性不太好）

使用axios发送Ajax请求

步骤：

1. 下载axios（在终端输入npm i axios）
2. 引入axios（在script标签里面输入import axios from 'axios'）
3. 发起axios.get请求

代码示例：

      axios.get('http://localhost:5000/students').then(
        response=>{
          console.log('请求成功了',response.data);
        },
        error=>{
          console.log('请求失败了',error.message);
        }
      )

如果按照以上代码直接发起请求会报错，会产生一个跨域问题，错误如下：

解决Ajax请求跨域方式：

1. cors（最标准的方式，不用前端人员去写，是写服务器的人员在返回响应时加上了几个特殊的响应头）
2. jsonp（巧妙的方式，借助script标签里面的src属性在引入外部资源的时候不受同源限制的特点，但是需要前后端人员同时配合才行，并且还只能解决get请求的跨域问题，开发中用得少）
3. 代理服务器（用挺多，借助nginx或vue-cli来开启代理服务器）

跨域问题产生及解决图示：

第一种vue-cli配置代理服务器的方式

步骤：

1. 查vue-cli文档，找到配置参考里面的devServer.proxy，复制代码devServer:{}
2. 打开vue.config.js文件在module.exports里面粘贴代码
3. 修改axios.get里面的地址为代理服务器的路径

代码示例：

vue.config.js文件代码：

module.exports = {
    pages: {
        index: {
            //入口
            entry: 'src/main.js',
        },
    }
    //开启代理服务器
    devServer: {
        proxy: 'http://localhost:5000'
    }
}

App.vue文件代码：

export default {
  name: 'App',
  methods:{
    getStudents(){
      axios.get('http://localhost:8080/students').then(
        response=>{
          console.log('请求成功了',response.data);
        },
        error=>{
          console.log('请求失败了',error.message);
        }
      )
    }
  }
}

注意：使用以上配置代理的方式会产生两个问题

1. 当请求的资源自身有，就不会向提供数据的服务器发起请求
2. 不能配置多个代理

第二种vue-cli配置代理服务器的方式

步骤：

1. 查vue-cli文档，找到配置参考里面的devServer.proxy，复制第二段代码devServer:{}
2. 打开vue.config.js文件在module.exports里面粘贴代码
3. 修改axios.get里面的地址为代理服务器的路径

示例代码：

vue.config.js文件代码：

module.exports = {
    pages: {
        index: {
            //入口
            entry: 'src/main.js',
        },
    },
    //开启代理服务器
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:5000',
                pathRewrite: { '^/api': '' },
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
            '/foo': {
                target: 'http://localhost:5001',
                pathRewrite: { '^/foo': '' },
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            }
        }
    }
}

App.vue文件代码：

总结

方式一：

• 优点：配置简单，请求资源时直接发给前端（8080）即可。
• 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
• 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方式二：

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

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