Vue2-脚手架配置代理(同源策略及跨域问题)、github获取用户案例、vue-resource、插槽

本文链接：https://blog.youkuaiyun.com/weixin_56498069/article/details/132394284

🥔：勿失心所念，万事尽可期

更多Vue知识请点击——Vue.js

VUE2-Day10

脚手架配置代理

先在脚手架文件目录下npm i axios安装一下axios

忘记如何用axios发请求的点击此处复习

1、引出跨域问题

这里有一个url为http://localhost:5000的服务器，此时url为http://localhost:8080的前端应用要请求这个服务器的数据，由于同源策略，会发生跨域。

我们之前已经了解过同源策略、跨域问题及解决方法点击此处复习

跨域就是违反同源策略，同源策略就是协议、域名、端口号三个必须完全一样
解决跨域请求数据问题，要么让后端加上那个Access-Control-Allow-Origin’, ‘*’，要么用jsonp的script的src属性，但这两种用的不多，我们还有第三种方式，那就是借助一个代理服务器，其端口号和请求端口号一致（这里以8080举例）。

请添加图片描述

那么上面的问题我们可以这样解决：

可以利用vue-cli配置一个中间的代理服务器，其url也是http://localhost:8080（vue项目服务器和代理服务器是一台服务器8080），代理服务器8080和5000服务器之间交换数据不需要遵循同源策略（服务器和服务器之间互相访问用http即可），所以可以8080服务器可以把8080前端应用的请求转发给5000端口服务器

2、配置代理服务器

（1）方式一

在vue.config.js中添加如下配置开启代理服务器

//开启代理服务器
  devServer: {
   
    proxy: 'http://localhost:5000',
  },

在App.vue中使用代理服务器

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

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

说明：

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）。这话的意思就是说，如果8080本身就有students这个路径（比如我在脚手架文件的public里新建了个students），那么请求会先找8080的这个students，如果8080没有students，才会把请求转发给5000端口去拿5000的students。
注意：仔细观察8080和5000分别写在什么位置

(2)方式二

在vue.config.js中添加如下配置开启两个代理服务器

//开启代理服务器(方式二)
  devServer: {
   
    //方式二可以加路径前缀，如果看到前缀就去请求5000，不会再从8080找数据
    proxy: {
   
      //前缀名字为potato
      '/potato': {
   
        //告诉ajax请求要转发给谁 
        target: 'http://localhost:5000',
        //pathRewrite把请求转发给5000时去掉potato路径
        //一般来说后端都会写成api/xxx，就不用手pathRewrite了