当前位置:首页 » 数据仓库 » 前端测试地址代理怎么配置
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端测试地址代理怎么配置

发布时间: 2023-07-12 08:20:40

A. 在vue项目中配置proxy解决跨域问题

1.问题:

后端给的接口是:https://stg-pteppp.leanapp.cn/h5/jsconfig.前端在本地开发中调用该接口跨域。

2.解决方案:

* 在webpack中配置proxy。如下图所示

如上:

1. target是你要代理的域名,必须要加上http。

2. 这里用'/api'代替target里面的地址,组件中调用接口时直接用'/api'代替。比如我要调用'https://xxx.com/news.直接写'/api/news'即可

3. changeOrigin必须为true

* 在页面中请求写法如下:

开心吧。数据终于拿到啦!!!

我们知道,vue2.0项目中的static文件夹存储的是静态资源,可以直接被访问到的,如果我们将mock的数据放入static文件夹,在浏览器中直接访问http://localhost:8080/static/json/list.json发现是可以访问到数据的。于是我们在页面将mock数据的请求写成下面这样:

则需要在webpack中做如下配置:

注意这里的http一定不能省略,否则数据请求不到。这样做的好处是在本地开发时mock的接口和线上的接口一致,避免上线前大量改动接口名称。

B. vue-配置代理解决跨域

我们需要向一台服务器上上传图片,接口是 " http://xxxx.xxx.xx/file/upload_img ",直接向这台服务器请求上传图片将会产生跨域问题,我们这里有两种解决方式
1.让后台帮忙配置,一下是node实橘罩现

2.前端配置代理(在前端请郑伍激求node服务器,node服务器再帮我们发送真正的请喊袜求)

C. 前端开发环境中怎么配置反向代理跨域获取数据

upstream cjdby{ server pigoss; server tianyuan; } 在server节点中,只保留一下location,然后把proxy_pass改成这样 proxy_pass http://cjdby; 其它的set_header不变

D. vue 前端设置跨域多代理

在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理,本文以vue-element-admin为例展示步骤如下:
1: 配置环境变量 .env.development

2: 配置项目根目录下的vue.config.js 找到devServer

PS:注意VUE_APP_BASE_API 放在数组的最后一个,如果你VUE_APP_BASE_API跟我一样设置为'' 的话,这样才不会被代理的虚拟path覆盖!

3: 找到项目中管理请求地址的文件 src/api/proxy.js (proxy.js 是我随便起的名字😄)

打开proxy.js

proxy_api 就是你之前在步骤1:中定义的虚拟path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) => (proxy_api + path) 一个路径处理函数,参数是'/xx/xxx/fetch/list',return (proxy_api + path)

需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空:

所以不需要在src/utils/request.js 中对代理的请求进行拦截

如果你为VUE_APP_BASE_API设置了虚拟path路径,那么就需要在src/utils/request.js为这个虚拟路径配置拦截,比较麻烦比不建议这么做。

至此跨域多代理已经设置完了,本文中设置两个代理一个基础代理VUE_APP_BASE_API,一个额外代理VUE_APP_BASE_API_PROXY,默认情况下走基础代理,当请求匹配到匹'/proxy-api' 时走额外代理~

E. 前端跨域解决 (vscode live server proxy 代理)

这个显然是处理前端跨域最优的方法了,在此记录下来方便以后使用,附送scss 转 css

使用 vscode IDE作为编写工具

1.搜索并加载 vscode 插件 live server
2.要文件根目录创建 ".vscode" 目录
3.在 .vscode 目录下创建settings.json
4.proxUri 为代理的目标地址
5.baseUri 识别代理的符号 (如下例中 baseUri: '/api', 则以"/api"开头的网络请求都将被识别为需要代理转发的地址,并把 ‘/api’重写为空"")

1.ajax请求会受到浏览器同源策略的限制(同源 = 域名 + 端口 都一致)
2.ajax请求默认携带 同源下的所有cookie, 如果不做限制 a 去请求 b 的时候就等于把a所有的cookie 都告诉b。
3.同源下: 张三的网站只能访问张三的内容如鞋子衣服吃饭等等,如果想访问李四的,浏览器就不让你干了。如果充许这么干的话,张三的cookie隐私将直接暴露给李四,李四有可能干一些不怀好意的事情。
4.跨域情况:张三把钱都放在李四那里,现在张三想去李四那边取钱,这时候就需要跨域了。
5.跨域怎么解决呢?接下来把解决问题的思路简单描绘一下。
5.1:李四告诉全世界说我对钱不感兴趣,只要我有,你们所有人都随便来取。因此,当浏览器看到张三要取钱的人是李四这种慈善家,就不再拦着你了。
5.2:李四不是慈善家怎么办?于是张三这个时候就很讨厌浏览器,想了个办法绕过浏览器,然后另外找了个代理去跟李四取钱
5.2.1: 问题是绕过浏览器?怎么绕呢? 于是张三自己建了个服务器,每次要跟李四取钱的时候就欺骗浏览器说我要跟自己的服务器取钱,浏览器这个时候也就不再拦着你了
5.2.2:当张三自己的服务器接收到跟李四取钱任务后,就以proxy代理的身份向李四取钱,取完钱之后再通过浏览器给了张三
5.2.3:vscode 中的live server 插件里面就这个代理向李四取钱的代理服务器功能,本文settings.json 中包含了配置信息
6.当然还有一些很多牛叉的解决跨域的方法。若有兴趣的同学可以一起研究探讨。