Vue | Vue中的Ajax【vue脚手架配置代理服务器 + github案例 + slot插槽】

不爱吃菜的蔡菜

已于 2022-07-22 16:16:04 修改

阅读量775

点赞数

分类专栏： Vue 文章标签： vue.js javascript ajax 前端

于 2022-07-21 18:22:36 首次发布

本文链接：https://blog.csdn.net/muziqwyk/article/details/125913924

版权

本文详细介绍了在Vue开发中如何解决Ajax跨域问题，通过配置代理服务器实现跨域请求。同时，提供了GitHub用户搜索案例，涉及到静态组件、动态组件、组件间通信的实现。还简单讨论了vue-resource作为Ajax请求方式，并讲解了Vue的slot插槽功能，包括默认插槽、具名插槽和作用域插槽的使用。

摘要由CSDN通过智能技术生成

解决开发环境Ajax跨域问题

前后端交互通常需要跨域，常用的跨域方法有cors、jsonp、代理服务器

vue脚手架可以通过 devServer.proxy 配置一个代理服务器

说明文档：https://cli.vuejs.org/zh/config/#devserver-proxy

引起跨域问题

启动服务器获取请求的地址
下载并引入axios
下载：npm i axios
引入：import axios from 'axios'
为了获取学生信息，对 http://localhost:5000 发起Ajax请求
报错，CORS ‘Access-Control-Allow-Origin’ 跨域违背了同源策略

目前所处的是 http://localhost:8081/，而发请求联系的是 http://localhost:5000/，引起了跨域问题

什么是代理服务器？
代理服务器跟我们前端所处的端口号一置，它会把自己伪装与网站同源的地址，所以当它请求完数据返回给前端的时候浏览器就不会拦截
如何用脚手架去配置代理服务器

配置代理服务器方法一

在vue.config.js中添加如下配置：

devServer:{
     
  proxy:"http://localhost:5000"
}

在这里插入图片描述

然后把脚手架给停掉，然后重新启动
然后再把原先请求的地址改一下，就可以请求到跨域的数据了

说明：

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

注意：不能灵活的控制请求是否走代理
当你请求的资源8081本身就有，他就不会把请求转发给5000

配置代理服务器方法二

编写vue.config.js配置具体代理规则：

module.exports = {
   
	devServer: {
   
      proxy: {
   
      '/api1': {
   // 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {
   '^/api1': ''} // 必须写
      },
      '/api2': {
   // 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {
   '^/api2': ''} // 必须写
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

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

步骤一：开启代理服务器
在这里插入图片描述
步骤二：加前缀

代码

vue.config.js

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true,
  lintOnSave: false, // 关闭语法检查
  // 开启代理服务器 (方式一)
  /* devServer: {  
    proxy: 'http://localhost:5000'
    // 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:5000
  }, */

  // 开启代理服务器 (方式二)
  devServer: {
   
    proxy: {
   
      '/api': {
    // 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:5000',
        pathRewrite: {
    '^/api': '' }, // 匹配所有以/api开头的路径，然后把/api变为空字符串
        ws: true,  // 用于支持websocket 
        changeOrigin: true  // 用于控制请求头中的host值
      },
      '/foo': {