涉及知识点

1.前端代理:解决跨域的问题

1.1了解跨域代理:https://segmentfault.com/a/1190000010719058

跨域是由浏览器同源策略引起的,是指页面请求的接口地址,必须与页面url地址处于同域上(即域名,端口,协议相同)。这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对JavaScript施加的安全限制。

(由于页面开发中,静态资源是放在本地电脑上,访问这些资源通常通过ip方式(127.0.0.1)或者是localhosts来访问,与线上服务器所在的域名不符,不能顺利进行接口调用。)

解决跨域问题常用的解决方案有两个:

jsonp:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数。

cors:服务器设置http响应头中的Access-Control-Allow-Origin值,解除跨域限制。

但是这两个都有一个致命的缺陷:严重依赖后端的协助。

于是有了前端独立就能解决的跨域方案:代理和反代理

代理

也称正向代理,是指一个位于客户端和目标服务器(target server)之间的服务器,为了从目标服务器取得内容,客户端向代理发送一个请求并指定目标(目标服务器),然后代理向目标服务器转交请求并将获得的内容返回客户端。

数据流程:

  • 数据请求过程:浏览器-》代理服务器-》目标服务器
  • 数据返回过程:目标服务器-》代理服务器-》浏览器

反向代理

反向代理(Reverse Proxy)是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

数据流程:

  • 数据请求过程:浏览器-》【反向代理服务器-》处理数据的服务器】
  • 数据返回过程:【处理数据的服务器-》反向代理服务器】-》浏览器

通俗地说:

「浏览器」可以看作食客,「【反向代理服务器-》处理数据的服务器】」这一个整体可以看作饭店,其中「反向代理服务」相当于点单的服务员。「处理数据的服务器」可以理解为是厨师。

  • 「食客」向来到「饭店」向「服务员」点菜,但服务员并不会真正去做菜,他是下达命令让「厨师」去做菜。
  • 「厨师」把菜做好了给「服务员」,「服务员」再把菜端给「食客」。

在外部看来,「代理服务器」和「处理数据的服务器」是一个整体。就好比,食客只会去饭店吃饭,而不是去找厨师吃饭(即对于浏览器来说,到达反向代理服务器已经完成任务了,后面的操作由反向代理服务器负责)。
具体饭店怎么操作,对食客是透明的。有可能某个服务员即当服务器也当厨师(即反向代理服务器和处理数据的服务器是同一台PC机)。

补充一下,没有反向代理,就好比没有了服务员,食客直接向厨师要吃的。譬如,你饿了,直接叫妈妈做饭是一样的(少了下订单的步骤)

1.2前端服务器代理Proxy

原链接:前端服务器代理 Proxy - Scok - 博客园

跨域资源请求

Vue资源服务器请求遇到常见的跨域资源请求时A-C-A-O,用Vue脚手架搭建的其实也是Node服务器环境.运行时仅仅只是将项目打包至内存环境下,然后浏览器运行该项目.若后端没有使用Cors中间件.则可以使用Proxy.

根目录创建 vue.config.js

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

具体配置信息

module.export={
  //代理一个服务器
  devServer:{
    proxy:'http://localhost:3000',
//告诉开发服务器将任何位置请求(没有匹配到静态文件的请求,代理到http://localhost:3000。
    host:'0.0.0.0',
    port:8003, //本地
    open:true,
    https:false,
    proxy:null,//string|Object
  },
  lintOnSave:false,//关闭esling警告。
  lintOnSave:process.env.NODE_ENV!=='production',//生产构建时禁用
  productionSourceMap:false,//打包不携带map文件
  
  //cli3代理多个服务器
  proxy:{//代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
  '/api':{   //axios访问/api==target+/api 
        target:'https://localhost:3000',
        changeOrigin:true,//创建虚拟服务器
        ws:true,//websocket代理
          },
     '/douban':{// axios 访问 /douban == target + '/douban'
      target:'https://api.douban.com',
      changeOrigin:true,
      pathRewrite:{//路径替换
        '^/douban':'',// axios 访问/douban/v2 == target + /v2
      }
    }
  }
}
  官方文档:


 

若有收获,就点个赞吧

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐