开发模式下跨域解决方案与代理服务配置
1、需求
前后端分离项目中,需要使用反向代理,已解决跨域访问问题,在这里需要了解正向代理、反向代理等概念,
2、正向代理
正向代理比较好理解,类似于一个跳板,用来代替客户访问外部资源。
例如:
A向C借钱,由于一些情况不能直接向C借钱,于是A想了一个办法,他让B去向C借钱,这样B就代替A向C借钱,A就得到了C的钱,C并不知道A的存在,B就充当了A的代理人的角色。
总的来说:
- 正向代理(forward proxy) ,一个位于客户端和原始服务器之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并制定目标(原始服务器),然后代理向原始服务器转发请求并将获得的内容返回给客户端,客户端才能使用正向代理。
3、反向代理
- 反向代理(Reverse Proxy),以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求的客户端,此时代理服务器对外表现为一个反向代理服务器。
- 理解起来有些抽象,可以这么说:A向B借钱,B没有拿自己的钱,而是悄悄地向C借钱,拿到钱之后再交给A,A以为是B的钱,他并不知道C的存在。
注意:脚手架 4 不能配置反向代理,需要降级处理
如果后端没有做跨域的请求,则前台做代理。
跨域代理,开发模式下前端来处理,线上由后端处理
原理: 由 8080 端口的服务器去帮助请求 3000 端口服务器 再有 8080 返回给前端浏览器
方法:
//vue.config.js
module.exports = {
// lintOnSave: process.env.NODE_ENV !== 'production',
devServer: {
proxy: {
'/api': {
// 就是使用/api代替了下边要写的后端的接口
// 你的真实的api地址,即真实接口地址
target: 'http://localhost:3001'<