Vue中的Ajax①(配置代理)

Vue中的Ajax①(配置代理)

文章目录

​​回顾​​​​尝试使用axios发送Ajax请求​​​​使用代理服务器解决跨域问题的原理​​​​配置代理服务器​​

​​方法一​​​​方法二​​

​​总结​​

​​方法一​​​​方法二​​

回顾

常用的发送Ajax请求的方法有哪些？

​​xhr​​ new XMLHttpRequest() xhr.open()、xhr.send()(真正开发中很少用到，太麻烦了，我们一般使用的都是他的二次封装)​​jQuery​​ 其对xhr有二次封装 $.get()、$.post​​axios​​ Promise风格，体积比jQuery小，并且支持请求拦截器、响应拦截器等等(最常用，也是Vue推荐的发送Ajax请求的方法)​​fetch​​ 跟xhr是平级的，它在window内置对象上直接存在！并且其也是Promise风格的，IE不支持(也有人使用)

尝试使用axios发送Ajax请求

然后我们发现：

很明显这是一个跨域问题，也就是说我们违背了​​同源策略​​

复习：同源策略规定了三个东西必须一致 ①协议名 ②主机名 ③端口号

我们现在所处的位置是localhost:8080

也就是说此时我们所处的状态：

使用的最标准的解决办法 使用这个方法不用前端人员去做任何事情。其原理是：写服务器的人，让服务器给我们返回数据的时候加几个响应头，而浏览器看到了这几个响应头，就会放行，把数据给我们。​​jsonp​​ 借助script标签的src属性。(真正开发基本不用！，因为其需要前后端一起配合，并且只能解决get请求的跨域问题)配置一个代理服务器(开发中常用)

使用代理服务器解决跨域问题的原理

左边红色方框代表本地浏览器，中间的粉色方框代表代理服务器，右边的蓝色方框代表服务器。

左边这个8080服务器，是Vue脚手架帮我们开启的，用来支撑脚手架的运行

这个代理服务器与我们所处的端口号一定是一样的！

当我们向服务器请求学生信息的时候，我们不直接请求服务器，而是找代理服务器，代理服务器收到了我们本次请求之后，他会帮我们把请求转发给服务器。然后服务器会把数据交给代理服务器，最后代理服务器再把数据交给我们。

从这个过程中我们不难看出，代理服务器有点“中介”的味道。

配置代理服务器

既然我们知道了要用代理服务器来解决跨域问题，那么我们怎么开启这个服务器呢？ 这里有两种常用的方法：

​​nginx​​​​vue-cli​​ (也就是借助Vue脚手架)

这里我们使用第二种方式，他更加的简单。

方法一

打开Vue-CLI的配置参考,找到devServer.proxy

​​{ defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, //开启代理服务器 devServer: { proxy: ' }})

因为我们修改了Vue的配置文件，所以必须重启脚手架才能生效、

在这个基础上我们修改请求的服务器：

结果：

这里有两个细节需要我们注意：

①这样配置代理服务器并非会把所有请求发给服务器。 当我们请求的资源8080服务器(本地服务器)本来就有的时候，代理服务器不会再把请求转发给服务器. 我们脚手架中的public文件夹就相当于8080服务器(本地服务器)的根路径。说直白点8080服务器中有什么public文件夹中就有什么。

我们可以举一个例子：

我们在students文件中写上112233。如果在这种情况下我们去请求，代理服务器不会把请求转发，而是直接返回112233.

②使用这种方式配置，只能配置一个代理服务器！

综上这样配置有两个弊端：

不能够配置多个代理不能灵活的控制是否使用代理

方法二

我们还是参考刚才的文档：

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, // devServer: { // proxy: ' // } devServer: { proxy: { '/api': { target: '', ws: true, changeOrigin: true }, '/foo': { target: '' } } }})

首先我们来看这一部分：

这个api就代表请求前缀，也就是说如果你此次请求的前缀是/api，则会走代理服务器。如此来灵活的控制是否使用代理。

请求前缀紧跟端口号

target代表如果你使用代理服务器，那么代理服务器向谁转发请求。

现在我们使用这种配置方式，发送一次请求：

配置代理服务器：

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, // devServer: { // proxy: ' // } devServer: { proxy: { '/csdn': { target: ' // ws: true, // changeOrigin: true }, } }})

其实这样是不成功的，最后返回的错误是404NOT FOUND。

之所以会发生这种错误是因为，代理服务器在转发请求的时候，也会带上前缀。也就是说代理服务器是想要服务器上的​​/csdn/students​​​数据，但我们的本意是要​​/students​​的数据。

解决这个问题我们需要另外一个配置项：​​pathRewrite​​

它的值是一个对象，里面包含着key和value。其中key写正则的匹配条件，value是替换的值

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, // devServer: { // proxy: ' // } devServer: { proxy: { '/csdn': { target: ' pathRewrite:{'^/csdn':''} // ws: true, // changeOrigin: true }, } }})

如此再请求，请求成功：

接下类我们继续来看：

ws用于支持websocketchangeOrigin用于控制请求头中的host值，形象点来理解：

当代理服务器向5000服务器发送请求时，5000服务器会问这个代理服务器来自哪里？如果我们将changeOrigin设为true，那么代理服务器会撒谎告诉它自己也来自于5000端口。如果我们将changeOrigin设为false，那么代理服务器会如实告诉它自己来自于8080端口。

接下来我们来配置多个代理：

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, // devServer: { // proxy: ' // } devServer: { proxy: { '/csdn': { target: ' pathRewrite:{'^/csdn':''} // ws: true, // changeOrigin: true }, '/csdn2': { target: ' pathRewrite:{'^/csdn2':''} // ws: true, // changeOrigin: true }, } }})

总结

vue脚手架配置代理

方法一

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

devServer:{ proxy:"（优先匹配前端资源）

方法二

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

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

说明：

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。