什么是配置代理
在前端开发中,通过设置一个中间层服务器来转发请求,解决跨域问题。(代理服务器充当客户端和目标服务器之间的中间人,将客户端发送的请求转发到目标服务器,并将目标服务器返回的响应返回给客户端。)
同源策略
浏览器的一种安全策略,要求请求的协议、域名、端口号必须完全一致。(限制一个源(域名、协议、端口)的页面只能请求同源(相同域名、协议、端口)的资源)
若不符合同源策略,则会产生跨域问题
解决跨域问题
- 后台直接放开,不安全
- jsonp原理就是利用了script标签的src不受浏览器同源策略的限制,需要后台配合
- 配置代理
在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开头的就替换为空字符串
}
}
}
}
})