vue.js - 如何使用以 api 开头的请求 url 的端口代理到我的域？

Question

我在端口 3000 上设置了一个环回 3。我的前端应用程序是用 Vue JS 构建的。（我将 dist 文件上传到服务器）。每当我进行 api 调用 ( https://example.com/api/xxx ) 时，我需要代理到 ( https://example.com:3000/api/xxx ) 以避免 cors 问题。

我该如何解决这个问题？

仅供参考，loopback 和 vueJS 托管在同一个 Web 服务器上（apache，centos8）

Answer 1

使用 NGINX 反向代理 https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

http://localhost:5000 - 指向你的 Vue.js 应用 http://localhost:3000 - 指向你的 REST API 应用

server {

  listen 80;

  server_name example.org;

  location / {
    proxy_pass http://localhost:5000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
  }

  location ^ ~/api {
    proxy_pass http: //localhost:3000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
  }
}