vue配置代理

什么是配置代理

在前端开发中，通过设置一个中间层服务器来转发请求，解决跨域问题。（代理服务器充当客户端和目标服务器之间的中间人，将客户端发送的请求转发到目标服务器，并将目标服务器返回的响应返回给客户端。）

同源策略

浏览器的一种安全策略，要求请求的协议、域名、端口号必须完全一致。（限制一个源（域名、协议、端口）的页面只能请求同源（相同域名、协议、端口）的资源）
若不符合同源策略，则会产生跨域问题

解决跨域问题

1. 后台直接放开，不安全
2. jsonp原理就是利用了script标签的src不受浏览器同源策略的限制，需要后台配合
3. 配置代理

在vue.config.js中配置代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
  proxy:{
    'course-api':{			//代理名称（用于替代原协议域名）
      	target:'',			//后台接口域名(代理的地址)
        changeOrigin:true,	//是否跨域
        pathRewrite:{		//路径重写
        	'^course-api':''	//以course-api开头的就替换为空字符串
        }
    }
  }
}
})