前端vue入门(纯代码)16

已于 2023-11-13 23:15:50 修改
阅读量274 收藏 1
点赞数 1
分类专栏： Vue前端 文章标签： 前端 vue.js javascript 前端框架
于 2023-06-27 21:46:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62003092/article/details/131425841
版权

【18.如何在Vue中配置代理服务器】

vue脚手架配置代理总结：修改了vue.config.js文件后必须重启项目【npm run serve】

方法一

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

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

说明：

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

​ 编写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
*/

说明：

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

1、请求回顾

  • （1）XMLHttpRequest【简称:xhr】：

    • (原生ajax, 是浏览器提供的 JavaScript对象，通过他它，可以请求服务器上的数据资源 。而jQuery中的Ajax函数，就是基于xhr对象封装出来了的 。

  • （2）jQuery 中的请求：( $.ajax,$.post,$.get ) 【Ajax底层封装了javaScript的XMLHttpRequest对象，且解决了浏览器之间的差异性，兼容性较好】

  • （3）axios【好用】 （相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。

    • axios可以请求的方法：
      • get：获取数据，请求指定的信息，返回实体对象
      • post：向指定资源提交数据（例如表单提交或文件上传）
      • put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
      • patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
      • delete：请求服务器删除指定的数据

  • （4）fetch【与XMLHttpRequest平级】

    • 是 XMLHttpRequest 的升级版，使用js脚本发出网络请求，但是与 XMLHttpRequest 不同的是，fetch 方式使用 Promise，相比 XMLHttpRequest 更加简洁，是为了取代传统xhr的不合理的写法而生的。

  • （5）vue-resource:

    • 是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，也就是说，jQuery中ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。此外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。（Vue的插件库，但是年久失修，基本不用）

    • vue 发送请求推荐使用 axios ，vue-resource 的更新频率不高，且 vue 也推荐 axios。

2、解决跨域问题：配置代理服务器-方式一

  • （1）安装axios
    npm install axios
    （2）导入axios
    import axios from 'axios'
    （3）准备两台服务器：

    （4）开启两台服务器：

    （5）在App.vue中编写代码利用axios获取服务器server1里的数据
    <template>
	<div>
		<button @click="getStudents">获取学生信息</button>
	</div>
</template>

<script>
// 引入axios
import axios from 'axios';
export default {
	name: 'App',
	methods: {
		getStudents() {
			// 获取该url的数据
			axios.get('http://localhost:5000/students').then(
				// 如果成功了怎么样？
				(Response) => {
               // Response:是一个对象，里面的data才是给你的数据
					console.log('请求成功了', Response.data);
				},
				// 如果失败了怎么样？
				(error) => {
                    console.log('请求失败了',error.message);
        }
			);
		},
	},
};
</script>
    （6）请求失败：axios,get()碰到了跨域问题。

  • 分析失败的原因：跨域了

  • 跨域指的是违背了同源策略，规定3样东西（协议名、主机名、端口号）必须一致。【当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域】

  • 【同源】：指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

  • 问题：如果发生跨域，那么请求究竟发没发过去？

    答案：请求发过去了，服务器也接收了，服务器还返回了呢，但是你客户端拿不到。

（7）如何解决跨域问题

  1. cors 后端返回响应时加几个特殊的响应头即可，前端啥又不用做。但是：一般不会这么用，因为配置了cors后那么任何人都可以向这台服务器获取数据，这是不对的，cors应该只设置某些服务器才对。

  2. jsonp 原理：借助script标签里的src属性，在引入外部资源的时候不受同源策略限制的特点办到的。但是缺点：

    • 1）前后端都得写东西，得一起配合 ；

    • 2）它只能解决get请求跨域问题，其他post、put、delete等等都解决不了。

  3. 配置代理服务器(推荐使用) 代理服务器特点：它跟你所处的位置是一样的。比如客户端端口号叫8080，那么配置代理服务器后端口号也叫8080，而不是端口号叫5000，代理服务器类似中介。

  • 问题：代理服务器绿色框8080 -> 淡粉色框5000服务器的两条线2和3，是不是还是跨域？端口号对不上？

答案：不影响，因为绿色框8080和淡粉色框5000都是服务器，服务器和服务器打交道不用ajax（ajax是页面访问服务器的方式），而是使用传统的http请求，所以同源策略根本管不到“2,3”的两条线。

  • 问题：如何开启代理服务器？方式有哪些？
  • 1）Nginx (“engine x”) 是一个高性能的 HTTP 和反向代理服务器，特点是占有内存少，并发能力强，事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用 Nginx 网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
  • 2）vue-cli脚手架。
  • 问题：vue-cli如何配置代理服务器？

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
	/* 默认情况【Default: false】下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代
	码中出现未转译的第三方依赖。 */
	transpileDependencies: true,

	pages: {
		index: {
			//入口
			entry: 'src/main.js',
		},
	},
	lintOnSave: false, //关闭语法检查

	//开启代理服务器（方式一）
	devServer: {
		proxy: 'http://localhost:5000',
	},
});
  • 问题：开启代理服务器的指定端口，指定8080？还是指定5000？
  • 答案：指定5000，因为8080不用你操心，默认所处位置是8080，那么代理服务器默认端口也是8080，而配置的端口号只是配置一会请求要转发到哪个服务器端口号即可。
  • 注意：配置完代理服务器【8080】了，那么调用接口就不能调5000了，应该调代理服务器的8080才能接口调通，先找中介要数据【得配置数据具体路径了】
axios.get('http://localhost:8080/students').then(
		// 如果成功了怎么样？
		(Response) => {
            // Response:是一个对象，里面的data才是给你的数据
			console.log('请求成功了', Response.data);
		},
		// 如果失败了怎么样？
		(error) => {
            console.log('请求失败了',error.message);
        }
);
  • 问题1：代理服务器不是把所有请求都转给5000，当你请求的资源8080本身就有，那么就不会去请求5000。
  • 举例1：访问项目里的public文件夹里的东西，就相当于直接访问8080上面的资源，那么就不会触发服务器端口号为5000的请求响应。
  • 问题2：如果请求路径是http://localhost:8080/students，而我public文件夹下也有个叫students的文件，那么调用接口就不会请求5000服务器了，而是直接把8080的public文件夹【相当于8080代理服务器的根目录】下的students内容当作接口返回值返回了。

  • 返回的数据：如下图

  • 知识点：该方式配置的代理服务器只能配置单个的单例服务器。
  • 1)不完美第1点：很局限，无法配置多个代理服务器。
  • 2)不完美第2点：无法去控制调用接口走不走代理服务器，只能说请求的8080没有了，才会把请求转发到代理服务器。

效果展示：

完整代码：

vue.config.js

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
	/* 默认情况【Default: false】下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出
  现未转译的第三方依赖。 */
	transpileDependencies: true,

	pages: {
		index: {
			//入口
			entry: 'src/main.js',
		},
	},
	lintOnSave: false, //关闭语法检查

	//开启代理服务器（方式一）
	devServer: {
		proxy: 'http://localhost:5000',
	},
});

App.vue

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

<script>
// 引入axios
import axios from 'axios';
export default {
	name: 'App',
	methods: {
		getStudents() {
			// 获取该url的数据
			axios.get('http://localhost:8080/students').then(
				// 如果成功了怎么样？
				(Response) => {
          // Response:是一个对象，里面的data才是给你的数据
					console.log('请求成功了', Response.data);
				},
				// 如果失败了怎么样？
				(error) => {
          console.log('请求失败了',error.message);
        }
			);
		},
	},
};
</script>

3、解决跨域问题：配置代理服务器-方式二

  • 方式2：vue-cli配置多个代理服务器

  • 1)去Vue CLI的官网里查看如何配置

    //开启代理服务器（方式二）
devServer: {
proxy: {
  '/xiaojidao': {
    target: 'http://localhost:5000',
    ws: true,          //用于支持websocket
    changeOrigin: true  //用于控制请求头中的host值
  },
}
}
  • ./api【请求前缀】:这个前缀就是用来控制代理服务器是否发送请求的，如果请求路径包含特定前缀，那么就会去发送请求到5000服务器。
  • target:target host to proxy to. (protocol + host)
  • changeOrigin:for virtual hosted sites。
  • ws属性:用于是否支持websocket。

问题：请求前缀定义了，加到请求路径的哪里？

答案：放到端口后面。【比如xiaojidao这个前缀，放置在端口号8080的后面】

axios.get('http://localhost:8080/xiaojidao/students').then();

问题：请求前缀定义了，也加进了请求路径中，但是我们重新运行程序时还是会报错！！！

答案：代理服务器配置前缀/xiaojidao后，代理服务器8080发送请求到服务器5000的路径为/xiaojidao/students，而实际5000服务器接口叫/students，不叫/xiaojidao/students，多了个前缀，所以报404找不到，正确办法是发送到5000的请求路径自动把前缀删掉才能调通。

解决方案：添加配置属性pathRewrite:{'^/xioajidao',''}，意为匹配所有以/xioajidao开头的字符串自动replace替换成空字符

//将所有的【/xiaojidao】replace替换成【空字符串】  
pathRewrite:{'^/xiaojidao':''},

完整配置：

//开启代理服务器（方式二）
devServer: {
proxy: {
  '/xiaojidao': {
    target: 'http://localhost:5000',
    //将所有的【/xiaojidao】replace替换成【空字符串】  
    pathRewrite:{'^/xiaojidao':''},
    ws: true,          //用于支持websocket
    changeOrigin: true  //用于控制请求头中的host值
  },
  '/xunwuguo': {
    target: 'http://localhost:5001',
    //将所有的【/xunwuguo】replace替换成【空字符串】  
    pathRewrite:{'^/xunwuguo':''},
    ws: true,          //用于支持websocket
    changeOrigin: true  //用于控制请求头中的host值
  },
}
},

补充:

  • ws属性:用于是否支持websocket。

  • changeOrigin:用于控制请求头中的host值是否为真（就是设置是否欺骗5000服务器）。

    • 如下图，举例：8080代理服务器到5000服务器的带红圈的这条线。

    • 1）如果changeOrigin设置true，那么5000服务器获取到请求会问代理服务器你从哪来啊，代理服务器回答我从5000而来【假话：好】；

    • 2）如果changeOrigin设置false，那么5000服务器获取到请求会问代理服务器你从哪来啊，代理服务器会如实回答我从8080而来。

    • 2）默认不写，vue也会配置changeOrigin：true，而React框架中默认不配置，则changeOrigin为false。

问题：changeOrigin这属性有啥用？

答案：比如5000服务器做了防火墙拦截，非5000端口过来的请求一律不能进入，这时候就需要设置changeOrigin:true了，这样请求就会欺骗5000从而放行请求通过了，所以正常使用都需要配置changeOrigin:true。

完整代码：

vue.config.js

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
	/* 默认情况【Default: false】下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出
  现未转译的第三方依赖。 */
	transpileDependencies: true,

	pages: {
		index: {
			//入口
			entry: 'src/main.js',
		},
	},
	lintOnSave: false, //关闭语法检查

	//开启代理服务器（方式一）
/* 	devServer: {
		proxy: 'http://localhost:5000',
	}, */
	//开启代理服务器（方式二）
  devServer: {
    proxy: {
      '/xiaojidao': {
        target: 'http://localhost:5000',
        //将所有的【/xiaojidao】replace替换成【空字符串】  
        pathRewrite:{'^/xiaojidao':''},
        ws: true,          //用于支持websocket
        changeOrigin: false  //用于控制请求头中的host值
      },
      '/xuanwuguo': {
        target: 'http://localhost:5001',
        //将所有的【/xunwuguo】replace替换成【空字符串】  
        pathRewrite:{'^/xuanwuguo':''},
        ws: true,          //用于支持websocket
        changeOrigin: true  //用于控制请求头中的host值
      },
    }
  },
});

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

App.vue

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

<script>
// 引入axios
import axios from 'axios';
export default {
	name: 'App',
	methods: {
		getStudents() {
			// 获取该url的数据
			axios.get('http://localhost:8080/xiaojidao/students').then(
				// 如果成功了怎么样？
				(Response) => {
          // Response:是一个对象，里面的data才是给你的数据
					console.log('请求成功了', Response.data);
				},
				// 如果失败了怎么样？
				(error) => {
          console.log('请求失败了',error.message);
        }
			);
		},
    getCars() {
			// 获取该url的数据
			axios.get('http://localhost:8080/xuanwuguo/cars').then(
				// 如果成功了怎么样？
				(Response) => {
          // Response:是一个对象，里面的data才是给你的数据
					console.log('请求成功了', Response.data);
				},
				// 如果失败了怎么样？
				(error) => {
          console.log('请求失败了',error.message);
        }
			);
		},
	},
};
</script>
neneduck
关注
专栏目录
用vue3制作一个简单的小米网站的代码
weixin_35749796的博客
12-28 265
好的，这是一份使用 Vue 3 制作一个简单的小米网站的代码示例： <template> <div class="mi-website"> <header> <h1>小米网站</h1> <nav> <ul> <li v-for="item...
前端vue入门(纯代码)04---全网最详细的Vue脚手架入门
m0_62003092的博客
06-08 462
Ctrl + C或 Ctrl +shift + C【以管理员的方式运行】Vue CLI叫做脚手架。，翻译为命令行接口工具，俗称脚手架。:创建Vue项目:运行该Vue项目。
vue 项目源码
08-07
一个公司做的vue项目，基本vue的功能都用到了，源码请勿举报
前端vue入门(纯代码)07
m0_62003092的博客
06-14 627
一共拆分为4个组件：整个TodoList案例的页面结构【html】和样式设置【style】：【还未实现动态交互】 静态页面展示：前期知识准备： 【false：input框不勾选】 【true：input框勾选】 【键盘按键事件：按下回车按键，调用add()方法】 是会返回触发事件触发的源头元素。【这个源头元素指的是，当我点击子元素，虽然父元素的点击事件也会被触发（冒泡机制），但子元素才是事件的源头元素。】 生成全球唯一的ID：uuidnanoid【是uuid的精简版】：问题一： 把数据添加到list
Vue 的入门代码
lxz_99527的博客
11-05 1858
Vue很有趣很简洁上手很快，深度很深。
vue框架源码
08-01
vue框架源码，集成了15中插件，都有对应的应用实例，下载可以直接用
前端Vue入门简介介绍
04-22
### 前端Vue入门简介知识点详解 #### 一、Vue.js概述 - **定义**： - **Vue**（发音类似于“view”，/vjuː/）是一款用于构建用户界面的JavaScript框架。 - 它的设计理念在于利用标准HTML、CSS以及JavaScript，...
前端vue入门及框架搭建
03-12
Vue.js 是一款轻量级的前端JavaScript框架，其设计理念是渐进式，这意味着开发者可以根据需求逐步引入Vue的核心功能，而不必一次性投入大量复杂性。Vue的核心聚焦于视图层，使得它非常适合构建用户界面，同时它也能...
Vue2全部代码 Vue2案例代码 Vue2教程代码.rar
11-23
Vue2 是一个流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。Vue2相比Vue1.x在性能和API设计上有了显著的优化。在这个名为"Vue2全部代码 Vue2案例代码 Vue2教程代码.rar"的压缩包中，很可能包含了一系列...
前端基础-VUE入门教程(一)
hjw15910531612的博客
07-21 3428
总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识
vue网站
02-07
vue网站 用Vue制作的基本网站调用现在离线的音乐API 托管在 代码需要一些清理； 重复CSS选择器如果API仍在线，则相册页面的外观如下： 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue代码案例
09-01
vue的基础入门，包含vue的基本方法和函数。数据绑定这个案例实现的特别好。
vue.js官方示例
05-13
vue.js 官方示例
Vue专项练习
qq_44665456的博客
04-24 4657
1、以下不是vue 内置指令的是（） v-html v- on v- for v-hidden 答：选D .== v-html 指令：让标签内用 html 渲染== , v-on 指令： 绑定事件，v- for 指令： 循环，v-hidden 没有 vue 中的 隐藏是 v-if 和 v-show 2、关于 Vuex 的说法错误的是 可以使用 this.$store.state 获取 Vuex 中的存储状态 getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新金酸
Vue面试题：30道含答案和代码示例的练习题
三拾的博客
05-05 1627
这里使用v-model指令将用户输入的内容绑定到Vue实例的message属性上，然后使用v-on指令监听键盘输入事件，当用户按下“Enter”键时调用Vue实例的sendMessage方法。v-model指令会在表单元素上创建一个监听器，在用户输入时实时更新Vue实例的数据，并且在Vue实例数据变化时更新表单元素的值。Vue组件是可复用的Vue实例，具有自己的模板、状态和行为。mixins可以将多个组件之间的共享功能抽离出来，形成一个混入对象，在组件中引入该混入对象即可获得该对象的所有属性和方法。
Vue小练习---TodoList案例（含代码）
m0_55877024的博客
05-08 729
Vue小练习---TodoList案例（含代码）
Vue代码练习
m0_74417939的博客
01-02 313
v-if和v-else-if和v-else v-show。v-bind和v-model。
Vue.js官网练习代码【所有代码均可运行，更便捷地理解官网解释】(可对照查看)
hannah2233的博客
03-17 656
文章目录1-1 0-组件化应用构建1-2 0-起步1-3 1-模板语法1-4 2-dataProperty和方法1-5 3-计算属性和侦听器1-6 4-class与Style的绑定1-7 5-条件渲染1-9 6-列表渲染1-10 6-一个todo列表1-11 7-事件处理1-12 8-表单输入绑定 1-1 0-组件化应用构建 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
Vue 3:实现页面返回上一页的功能
最新发布
weixin_73060959的博客
09-15 246
在Vue 3中，可以使用Vue Router库来实现页面返回上一页的功能。首先，确保你已经安装并设置了Vue Router。这两个方法都可以使浏览器的历史记录回退一步。来获取Vue Router实例。然后，我们定义了一个。函数会被触发，从而使浏览器返回到上一个访问的页面。在这个例子中，我们使用。
Vue入门笔记：前端与后端必读
"这篇笔记是针对前端和后端初学者准备的Vue.js教程，涵盖了Vue的基础概念、模板语法、指令使用、数据绑定、条件渲染、循环遍历、数组和对象的更新检测以及过滤器的应用等内容。" Vue.js是当前非常流行的一款渐进式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值