跨域难题破局：Nginx 代理助力 Vue 前端接口轻松连接

2023-10-17 06:24:59

在 Vue 前端开发中，跨域问题始终是一个令人头疼的难题。当前端与后端部署在不同域名或端口下时，浏览器出于安全考虑，会限制跨域请求，导致我们无法正常访问和操作数据。

为了解决跨域问题，我们可以借助 Nginx 代理服务器来巧妙地绕过浏览器的限制。通过在本地配置 Nginx 代理，我们能够将 Vue 前端请求转发到实际的后端服务，从而实现跨域数据交互。

代理配置步骤

在本地安装 Nginx 后，我们可以通过以下步骤配置代理：

创建一个新的配置文件，例如 /etc/nginx/sites-available/vue-app.conf。
在配置文件中添加以下配置：

server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

保存配置文件并启用它：

sudo ln -s /etc/nginx/sites-available/vue-app.conf /etc/nginx/sites-enabled/vue-app.conf

重启 Nginx：

sudo service nginx restart

关键词解释

listen 80; ：指定 Nginx 监听的端口号为 80。
server_name localhost; ：指定 Nginx 监听的域名或 IP 地址为 localhost。
proxy_pass http://localhost:3000; ：指定代理转发请求到的实际后端服务地址。
proxy_set_header Host $host; ：将请求头中的 Host 字段设置为与客户端请求相同的域名。
proxy_set_header X-Real-IP $remote_addr; ：将 X-Real-IP 头部添加到请求中，表示客户端的真实 IP 地址。
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; ：将 X-Forwarded-For 头部添加到请求中，表示请求经过的代理服务器。

实际代码示例

以下是一个 vue.config.js 文件的示例，其中配置了 devServer 的代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};