vue配置proxytable,vueconfig.js配置文件 proxy
今天被vue里的代理配置困扰了一天。我们来记录一下。下面文章主要介绍Vue配置文件中关于代理配置模式的相关信息，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
1.以axios的要求为例。
axios . get(/ABC/def )；
axios . get(/ABC/GHI )；
axios . post(/ABC/jkm )；
axios发送的请求是在本地服务器地址拼接上发送的请求，比如http://localhost:8080/abc/def。
2.如果所有发送的请求都以/abc开头，那么我们可以在代理中配置服务器代理。
devServer: {
代理服务器：{
/abc: {
目标： http://XX。XX.XX.XX:8081 ，
changeOrigin:真的，
ws:没错，
安全：假，
},
},
},
/abc:{}:引号表示以/abc开头的接口受到监控。目标：监听到/abc开头的接口后，axios请求前面的本地服务器地址改为后端接口地址，实际发送到后端的请求为下一个。
3358本地主机：8080/abc/def-http://XX。XX.XX.XX:8081/abc/defchangeOrigin:跨域ws:如果要代理websockets，配置这个参数secure:如果是https接口，需要配置这个参数(如果是http接口，就不用写这个参数)pathRewrite:替换请求中匹配的内容。在方法2/3中详细解释用法，但上面没有使用该参数。3.代理多个接口。
axios . get(/zzz/one )；
axios . get(/XXX/two )；
http://本地主机：8080/zzz/one
http://本地主机：8080/xxx/two
方法一：监听多个接口，可以在代理中写多个配置：(适用于目标的不同代理。你也可以用同样的方法使用这个方法，但是会有点麻烦，对于相同的目标方法2)会更方便
devServer: {
代理服务器：{
/zzz :
目标： http://XX。XX.XX.XX:8082 ，
changeOrigin:真的，
ws:没错，
},
/xxx: {
目标： http://XX。XX.XX.XX:8083 ，
changeOrigin:真的，
ws:没错，
},
},
},
那么发送到后端的实际请求是：
http://XX。XX.XX.XX:8082/zzz/one
http://XX。XX.XX.XX:8083/xxx/two
2:使用axios进行预设置(针对具有相同目标的代理)
//一般在全局设置中引入，比如main.js，这样第二行的配置就可以被每个axios请求识别。
从“axios”导入axios；
//只需发送一个axios请求，只需在请求前加上/api的开头，例如/zzz/one-/api/zzz/one
axios . defaults . base URL=/API ；
完成上述配置后，本地发送的请求将变成
http://localhost:8080/API/zzz/one
http://localhost:8080/API/XXX/two
然后可以设置代理只监听/api ，但是要设置pathRewrite参数：
devServer: {
代理服务器：{
/api: {
目标： http://XX。XX.XX.XX:8084 ，
changeOrigin:真的，
ws:没错，
路径重写：{
^/api: ，
},
},
},
},
PathRewrite:检查代理的请求中是否有/api。如果有，用冒号后的内容替换/api。在这种情况下，用空字符串替换它，即delete /api。(是正则表达式的内容，意思是限制开头)
本地请求是3358 localhost:8080/API/zzz/one-
代理人要求http://XX后。XX.XX.XX:8084/api/zzz/one-
在pathRewrite后设置请求http://XX.XX.XX.XX:8084/zzz/one。
所以代理完成后发送到后端的真正请求是http://XX。XX.XX.XX:8084/zzz/one.
(1.统一添加/api方便监控代理进行请求；2.统一删除/api发送正确的请求)
注意：朋友们可能会看到，在浏览器中单击鼠标右键，检查打开的控制台中的请求URL，Network-Header-General，显示http://XX.XX.XX.XX:8084/api/zzz/one.这是因为浏览器的同源策略。代理设置的请求以没有/api的http://XX.XX.XX.XX:8084/zzz/one形式发送到后端，不受浏览器显示的请求URL的干扰。如果实在不想在浏览器的请求URL中看到api，可以采用方法1。
总结
这就是这篇关于Vue配置文件中代理配置的文章。有关Vue配置文件中代理配置的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。