目录
vue项目中配置代理服务器:
为什么要配置代理服务器?
那么什么是跨域呢?
同源策略又是什么?
什么行为会违反同源策略?
代理服务器的工作原理
vue项目中配置代理服务器:
打开项目的vue.config.js配置文件,在module.exports抛出的对象中添加一个字段(属性)为devServer,值是一个对象,对象中再加一个字段为proxy,值也为一个对象,对象里面写代理服务器的配置,代码如下:
module.exports = {
publicPath: '/',
devServer: {
proxy: {
'/api': {
target: 'http://192.168.2.7:7001',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
/api是我们发送相对请求时的一级路由为/api(/api开头)时并且项目中本身并没有这个请求地址时就会走我们这个代理服务器,target:代理的地址,changeOrigin:控制服务器接收到的请求头中的host值,pathRewrite:向代理地址发送请求时去掉前缀(/api)
为什么要配置代理服务器?
配置代理服务器是为了解决跨域请求请求不到的问题的。
那么什么是跨域呢?
跨域是指你违反了同源策略。
同源策略又是什么?
同源策略是浏览器厂商提出的web安全策略,是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
什么行为会违反同源策略?
向和自己(当前页面的服务器地址) 不同域(不同源) 的服务器发送请求 (http/https:协议名 www.baidu.com/127.0.0.1:域名 8080/7777/8888:端口号) 只要有一个不同就违反了同源策略
代理服务器的工作原理
服务器没有同源策略,所以服务器不存在跨域问题。
我们在配置文件中配置一个代理信息,我们发送相对请求时(/xxx/xxx 这种请求浏览器会在前面默认加上当前页面所属服务器,把请求地址拼接为一个完整的请求)服务器先在自己身上寻找对应资源,找不到时服务器就会判断当前请求地址和我们配置的代理信息是否符合,符合的话就去帮我们发送请求,请求到之后就做出响应,请求不到就返回错误信息(404),这样就实现了服务器代理