前端代理解决跨域问题
前端代理解决跨域问题,请求外部api接口
涉及知识点
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 } } } } 官方文档:
若有收获,就点个赞吧
更多推荐
所有评论(0)