Vue 配置 proxy 后仍跨域的解决办法

在 Vue 项目开发过程中，跨域问题是常见的挑战之一。许多开发者会选择使用 proxy 来解决跨域请求的问题，但有时即便配置了 proxy，跨域问题依旧存在。下面就为大家分析可能的原因及解决办法。

检查 proxy 配置

要仔细检查 vue.config.js 中的 proxy 配置。确保路径匹配正确，目标服务器地址无误。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这里的 /api 是自定义的前缀，请求时路径以 /api 开头就会被代理到目标服务器。target 是目标服务器地址，changeOrigin 设置为 true 表示跨域，pathRewrite 用于重写路径。如果配置有误，比如 target 地址错误，就会导致跨域失败。

前端请求路径问题

前端发送请求时的路径也可能导致跨域问题。确保请求路径与 proxy 配置的前缀一致。例如，使用 axios 发送请求：

axios.get('/api/data').then(response => {
  console.log(response.data);
});

如果写成 axios.get('/data').then(response => {... })，就无法匹配到 proxy 配置，从而导致跨域请求失败。

后端服务器设置

有时候跨域问题的根源在后端服务器。后端可能没有正确配置 CORS（跨域资源共享）。后端需要设置响应头，允许前端所在的域名访问。以 Express 为例：

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://your-frontend-url');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

这里设置了允许特定前端域名的访问，以及允许的请求方法和请求头。

通过仔细检查 proxy 配置、前端请求路径以及后端服务器设置，大多数情况下可以解决 Vue 配置 proxy 后仍跨域的问题。在实际开发中，遇到问题要耐心排查，确保各个环节都正确无误，这样才能顺利实现跨域请求，提升开发效率。