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;
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228457.html原文链接：https://javaforall.net
![python微信推送{u‘errcode‘: 40008, u‘errmsg‘: u‘invalid message type rid: 6111061f-19703d5b[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
