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

解决开发环境Ajax跨域问题

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

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

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

引起跨域问题

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

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

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

配置代理服务器 方法一

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

   devServer:{
        
     proxy:"http://localhost:5000"
   }
   1
   2
   3
   4

   

2. 然后把脚手架给停掉，然后重新启动
   

3. 然后再把原先请求的地址改一下，就可以请求到跨域的数据了
   

说明：

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

注意：不能灵活的控制请求是否走代理
当你请求的资源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
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

说明：

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

步骤一：开启代理服务器

步骤二：加前缀

代码

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': 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21