vue-cli设置proxy代理

Proxy是什么？

proxy是ES6中就存在的，用于修改某些操作的默认行为，可以理解成在目标对象前设一个拦截层，因此也叫“代理器”。

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

Proxy的语法

ES6 原生提供的 Proxy 语法很简单，用法如下：

let proxy = new Proxy(target, handler);

如何配置proxy

找到 vue.config.js 文件，添加以下配置

module.exports = {devServer: {port: '8081', // 设置端口号proxy: {'/api': {target: 'http://ahbcht.com', //API服务器的地址ws: true, //代理websocketschangeOrigin: true, // 是否跨域，虚拟的站点需要更管originpathRewrite: {// '^/api'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8081/api' 转接为 http://localhost:8081/'^/api': '',}}},}
}

axios 请求

getNewsList() {axios.get('/api/getData').then((res) => {console.log(res) })
}

更详细内容，可以查阅 vue-cli 官网文档

需要注意的问题

代理只对 devServer 配置中的端口请求生效
axios 中 baseURL 如果被配置过，如：baseURL="http://192.168.100.1/9000"，此时proxy代理不生效

上线 `nginx` 配置

vue-cli 设置代理后，上线时也需要配置代理，以下以 nginx 为例

http {server {listen 8081; server_name localhost 127.0.0.1 10.20.11.153;  # 站点域名location / {root   ../road_net_ui;index  index.html index.htm;}location /api {proxy_pass http://10.20.11.153:1026;proxy_set_header   X-Forwarded-Proto $scheme;proxy_set_header   Host              $http_host;proxy_set_header   X-Real-IP         $remote_addr;}location /webhdfs {proxy_pass http://10.20.10.171:9870;proxy_set_header   X-Forwarded-Proto $scheme;proxy_set_header   Host              $http_host;proxy_set_header   X-Real-IP         $remote_addr;}}
}

vue-cli设置proxy代理相关推荐

vue如何设置反向代理
vue中设置反向代理: 在vue.config中:
Linux安装jupyter debugger+Conda设置proxy代理
参考文档:https://jupyterlab.readthedocs.io/en/stable/user/debugger.html 需要执行如下两条命令: conda create -n jupy ...
Nginx笔记-使用Nginx给vue应用设置一个代理
目录注意点演示注意点首先是vue的修改,用脚手架搭建的vue只能是localhost进行访问.修改config下的index.js让其都能访问,修改host为0.0.0.0 第二个要注意的地方 ...
Vue proxy代理
proxy代理是解决开发环境中的跨域问题,正式环境的跨域需要使用nginx反向代理或者是后端解决在vue中实现proxy代理的步骤在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器 ...
vue cli配置代理解决跨域问题
内容跨域问题解决跨域问题 vue cli配置代理跨域问题是由于违背了同源策略,同源策略规定了协议名.主机名.端口号必须一致我们目前所处的位置是http localhost 8080,我们想向 ...
关于Vue 3.0 的改进 Proxy 代理实现数据驱动视图
Vue 3.0 中使用了 Proxy 对象代理进行拦截实现了数据绑定视图的驱动操作.弥补了vue2.0中的局限,比如属性删除增加监听.对数组基于下标的修改.长度变化等等. 参考一下网上流传的机制图 P ...
vue跨域问题：proxy代理跨域
前端跨域,本地跨域,vue项目跨域问题疑问1: 前端开发中解决浏览器的跨域问题 (推荐阅读) 什么是跨域? 为什么要跨域? 解决"跨域"的五种常见方式: 1. JSONP 2. ...
vue.config.js配置proxy代理解决跨越；proxy代理报404；
像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题. 本文我们是在v ...
C#程序中设置全局代理(Global Proxy)
1. HttpWebRequest类的Proxy属性,只要设置了该属性就能够使用代理了,如下: 1 //设置代理 2 WebProxy WP = new WebProxy("41.76.44 ...
vue cli3 绑定域名_使用CLI设置WildFly绑定地址并关闭
vue cli3 绑定域名仅使用命令行参数将WildFly绑定到主机名/ IP上非常容易. 我有一个简单的GNU / Linux盒子,可以用它玩各种东西,其中之一就是WildFly. 我使用以下命令 ...

vue-cli设置proxy代理

Proxy是什么？

Proxy的语法

如何配置proxy

需要注意的问题

上线 `nginx` 配置

vue-cli设置proxy代理相关推荐

最新文章

热门文章

vue-cli设置proxy代理

Proxy是什么？

Proxy的语法

如何配置proxy

需要注意的问题

上线 nginx 配置

vue-cli设置proxy代理相关推荐

最新文章

热门文章

上线 `nginx` 配置