vue-cli设置proxy代理

最新推荐文章于 2024-08-14 11:10:33 发布

大雄Obear

最新推荐文章于 2024-08-14 11:10:33 发布

阅读量4.4w

点赞数 15

分类专栏： WEB开发文章标签： vue-cli设置proxy vue设置proxy 前端代理前端跨域代理接口请求跨域

本文链接：https://blog.csdn.net/bigbear00007/article/details/109824696

版权

WEB开发专栏收录该内容

55 篇文章 2 订阅

订阅专栏

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, //代理websockets
              changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
              pathRewrite: {
                // '^/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;
	  }
	}
}