vue框架学习 -- 跨域问题解决之 proxy 配置

在Vue.js项目中,为了在开发环境下解决跨域问题,我们可以利用 vue.config.js

文件中的 devServer.proxy 配置来设置一个代理服务器。这个代理服务器会拦截特定的请求,并将其转发到目标后端服务器。

以下是一个基本的proxy配置详解:

// vue.config.js 文件

javascript 复制代码
// vue.config.js 文件

module.exports = {
  // ...
  devServer: {
    // 配置代理
    proxy: {
      // 指定需要代理的URL前缀
      '/api': {
        // 目标API服务器的基础URL(将被替换为实际发送请求的目标地址)
        target: 'http://localhost:3000', // 假设后端服务器运行在本地3000端口

        // 是否需要改变请求头中的主机信息(true表示模拟同源请求)
        changeOrigin: true,

        // 路径重写规则,当路径匹配'/api'时,
        // 将路径中的'/api'替换成''
        pathRewrite: {
          '^/api': '' // 如果接口不需要/api前缀,则可以去掉它
        },

        // 可选配置项:自定义headers
        headers: {
          'X-Custom-Header': 'foobar'
        },

        // 可选配置项:重写函数,允许更灵活的路由匹配和替换
        onProxyRes(proxyRes, req, res) {
          // 对响应进行处理...
        },

        // 可选配置项:错误处理
        onError(err, req, res) {
          // 当代理出错时执行
        },

        // 可选配置项:WebSocket支持
        ws: true,

        // 其他可选高级配置,如:
        // secure: false, // 如果目标是HTTPS,但证书不受信任,设置为false
        // logLevel: 'debug', // 设置日志级别
        // autoRewrite: true, // 自动重写路径以适应代理目标
        // etc.
      },
    },
  },
};

通过上述配置,当Vue应用在开发过程中发出对 /api/xxx 的任何HTTP请求时,这些请求会被自动代理至 http://localhost:3000/xxx

从而绕过了浏览器的同源策略限制,使得前端应用能够与不同域名下的后端服务正常交互。

请注意,该配置仅在开发阶段使用,生产环境部署时通常不再需要这种代理,因为生产环境一般可以通过Nginx等反向代理服务器或配置CORS来解决跨域问题

示例代码:

// vue.config.js 文件

javascript 复制代码
const { defineConfig } = require('@vue/cli-service');
const { resolve } = require('path');
const env = process.env;
const IS_PRODUCTION = env.NODE_ENV === 'production';

// 代码压缩工具
const TerserPlugin = require('terser-webpack-plugin');

// 设置版本号
env.VUE_APP_VERSION = require('./package.json').version;

module.exports = defineConfig({
  publicPath: './',
  assetsDir: 'static',
  transpileDependencies: true,
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: 8080,
    proxy: {
      [env.VUE_APP_API]: {
        target: env.VUE_APP_API_PROXY, // 代理的 API 服务器
        // secure: false,  // https
        changeOrigin: true,
        pathRewrite: {
          [`^${env.VUE_APP_API}`]: '',
        },
      },
    },
    client: {
      overlay: false,
    },
    // Webpack 4 devServer.before configurations,In Webpack 5 is devServer.setupMiddlewares configurations
    setupMiddlewares: function (middlewares, devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }
      return middlewares;
    },
  },
  css: {
    // 开启 CSS source maps?
    sourceMap: !IS_PRODUCTION,
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {},
          javascriptEnabled: true,
          math: 'always',
        },
      },
    },
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [resolve(__dirname, 'src/assets/styles/_variable.less'), resolve(__dirname, 'src/assets/styles/global.less')],
    },
  },
  configureWebpack: config => {
    // 给输出的js名称添加hash
    config.output.filename = "dist/js/[name].[hash].js";
    config.output.chunkFilename = "dist/js/[name].[hash].js";
    config.optimization = {
      minimizer: [
        // ============代码压缩 start============
        new TerserPlugin({
          cache: true,
          parallel: true,
          sourceMap: false, // Must be set to true if using source-maps in production
          extractComments: false, // 删除注释
          terserOptions: {
            // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
            output: {
              comments: false, // 删除注释
            },
            compress: {
              warnings: false, // 若打包错误,则注释这行
              drop_debugger: true,
              drop_console: true,
              pure_funcs: ['console.log'],
            },
          },
        }),
        // ============代码压缩 end============
      ],
      splitChunks: {
        cacheGroups: {
          // 将配置文件单独打包
          config: {
            name: "_config",
            test: /[\\/]src[\\/]config[\\/]/,
            chunks: "all",
            // priority: 3,
            reuseExistingChunk: true,
            enforce: true
          },
        }
      }
    }
  },
});
相关推荐
翻滚吧键盘7 分钟前
{{ }}和v-on:click
前端·vue.js
碎叶城李白7 分钟前
若依学习笔记1-validated
java·笔记·学习·validated
上单带刀不带妹13 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
im_AMBER33 分钟前
学习日志05 python
python·学习
杨进军34 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js