Vue2解决跨越配置代理

发送请求方式

1. xhr
2. jQuery ($.get $.post)
3. axios (体积小) npm i axios

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

4. vue-resource (xhr的封装) npm i vue-resource

	this.$http.get()

5. fetch（IE兼容性差）

为什么会出现跨域问题？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

解决跨域方式有哪些？

 1. CORS （前后端都需要处理）
 2. JSONP （缺点是只支持get请求，不支持post请求）
 3. 代理服务器 nginx、 vue-cli

Vue脚手架配置代理

方法一：在vue.config.js中添加如下配置：
javascript devServer: { proxy: 'http://localhost:5000' }
说明：
1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
方法二：
编写vue.config.js配置具体代理规则：

module.exports = {
    devServer: {
      proxy: {
        /* 匹配所有以'/api'开头的请求路径 */
        '/api': {
          target: 'http://localhost:5000',//代理目标的基础路径
          pathRewrite: {  // 重命名
            '^/api': ''
          },
          // ws: true,//用于支持websocket
          // changeOrigin: true,//用于请求头中的host值
        },
        /* 匹配所有以'/demo'开头的请求路径 */
        '/demo': {
          target: 'http://localhost:5001',//代理目标的基础路径
          pathRewrite: {  // 重命名
            '^/demo': ''
          },
          // ws: true,//用于支持websocket
          // changeOrigin: true,//用于请求头中的host值
        }
      }
    }
  }
  /* 
  changeOrigin设置为true时，服务器收到的请求中的host为：localhost:5000
  changeOrigin设置为false时，服务器收到的请求中的host为：localhost:8000
  changeOrigin:默认值为true
  */

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理
2. 缺点：配置略微繁琐，请求资源时必须加前缀。

GitHub提供的免费接口

查看列表数据

https://api.github.com/search/users?q=xx

案例

vue.config.js
开启代理服务器方式一

module.exports = {
    lintOnSave:false,//是否检查代码
    pages: {
      index: {
        // page 的入口
        entry: 'src/index.js',
      },
    },
    devServer: {
      proxy: 'http://localhost:5000'//5000服务器端口
    }
  }

开启代理服务器方式二
xxxx.vue

开启http://localhost:8080/api/students 、 http://localhost:8080/demo/cars的服务文件见博客下载中的test_proxy_server

<template>
  <div>
    <button @click="send">发送请求server1</button>
    <button @click="send2">发送请求server2</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Test",
  data() {
    return {
      show: true,
    };
  },
  methods: {
    send() {
      axios.get("http://localhost:8080/api/students").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
    send2() {
      axios.get("http://localhost:8080/demo/cars").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
  },
};
</script>

module.exports = {
    lintOnSave:false,//是否检查代码
    pages: {
      index: {
        // page 的入口
        entry: 'src/index.js',
      },
    },
    /* 开启代理服务器 */
  /*   devServer: {
      proxy: 'http://localhost:5000'
    } */
    devServer: {
      proxy: {
        /* /api请求前缀 */
        '/api': {
          target: 'http://localhost:5000',//代理地址
          pathRewrite: {  // 重命名
            '^/api': ''
          },
          // ws: true,//用于支持websocket
          // changeOrigin: true,//用于请求头中的host值
        },
        '/demo': {
          target: 'http://localhost:5001',//代理地址
          pathRewrite: {  // 重命名
            '^/demo': ''
          },
          // ws: true,//用于支持websocket
          // changeOrigin: true,//用于请求头中的host值
        }
      }
    }
  }