企业门户网站费用,网站数据包如何做架构,医药公司网站备案,图书网站建设策划书1万字目录
为什么需要配置代理
什么是同源策略
如何配置代理
请求代理的原理
举例说明 为什么需要配置代理 因为浏览器的同源策略#xff0c;当向和本地 devServer 服务器不同源的地址发送请求#xff0c; 会违反浏览器的同源策略#xff0c;导致发送失败#xff0c;所以需…目录
为什么需要配置代理
什么是同源策略
如何配置代理
请求代理的原理
举例说明 为什么需要配置代理 因为浏览器的同源策略当向和本地 devServer 服务器不同源的地址发送请求 会违反浏览器的同源策略导致发送失败所以需要配置本地服务器代理请求 什么是同源策略 同源策略是浏览器厂商提出的web安全策略是浏览器最核心也最基本的安全功能 同源即协议http等相同域名www.baidu.com等相同端口8080等相同 只要有一个不同就违反了同源策略 如何配置代理 在 vue devServer服务器配置文件 vue.config.js 的 devServer 选项中配置 proxy
// 本地服务器配置
devServer: {proxy: {// /api可以是字符串形式的任何值表示以/api开头的请求// 实际项目中所以路径以/api开头的请求都会被本地服务器转发/api: {// target指想要被代理的后端接口服务器地址(目标路径)(真正需要请求的服务器地址)target: http://192.168.3.122:1100,// 设置为true后请求头中的host值会被设置成目标URL(target)中的host值changeOrigin: true,// pathRewrite用以在发送请求时重写请求路径// 如果在实际的请求路径中你不希望出现/api可以重写路径在请求路径中去掉/api// 假设接口服务地址为http://192.168.3.122:1100接口路径为/company/list// 假设你的 baseURl 为/api那么请求路径就会变成http://192.168.3.122:1100/api/company/list路径中多余/api// 那么你可以通过重写如下方式去掉/api具体的使用根据业务来决定pathRewrite: {^/api: }}}
} 请求代理的原理
一句话总结服务器不受同源策略的影响
因为服务器不受同源策略的影响所以可以使用本地 devServe 服务器将请求代理到目标服务器上。
所以前端需要先向本地服务器发送请求通过 proxy 的代理配置本地服务器就可以将我们的请求代理到目标服务器上。
解释1如果前端请求没有服务器地址域名或ip浏览器会在前面默认加上当前页面所属服务器地址开发环境为devServer服务器地址服务器先在自己身上寻找对应资源找不到时服务器就会判断当前请求地址和我们配置的代理信息是否符合符合的话就去帮我们发送请求。 假设有一本地启动前端项目和后端接口服务器
前端地址为http://localhost:8083本地 devServer 服务器地址以下简称本地地址
后端接口服务地址为http://192.168.3.122:1100真正请求的服务地址以下简称接口地址
假设 baseURL 为接口地址会跨域那么可以将 baseURL 设置为本地地址并添加代理路径向本地服务器发送请求或者设置 baseURL 为 /api那么请求同样会指向本地服务器见解释1通过配置本地服务器 proxy 代理设置如上设置将请求中包含 /api 的请求代理到目标服务器上有点类似nginx代理。
因为 proxy 中配置的是对某一具体路径的请求的代理所以 URL 路径中必须包含配置的路径否则不会被代理。如 baseURL 如果为本地地址则需要在 baseURL 中添加一个路径标识并在 proxy 中配置标识的代理设置才能正确代理。 举例说明
接口服务地址http://192.168.3.122:1100
前端服务地址http://localhost:8083开发环境
如果需要将请求通过前端服务代理到接口服务地址可以配置前端 baseURL 为 /api 或者 http://localhost:8083/api
如果接口路径为 /login登录
本地请求全路径为http://localhost:8083/api/login接口路径多余 /api
代理设置 changeOrigin 为 true则 localhost:8083 会被替换为 192.168.3.122:1100
此时请求全路径变为 http://192.168.3.122:1100/api/login
代理设置 pathRewrite 重写请求路径 /api 为
最终路径为 http://192.168.3.122:1100/login可以成功发送请求 ~~完~~
