本地vue调试解决跨域问题

最新推荐文章于 2025-06-09 15:19:38 发布

原创最新推荐文章于 2025-06-09 15:19:38 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #跨域

在本地Vue开发环境中，遇到API接口跨域问题时，可通过配置解决。具体步骤包括在`config`目录下创建`proxyConfig.js`，设置代理规则，然后在`index.js`中引入并应用。最后，使用axios等库调用接口即可实现跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地vue调api接口的时候，要注意跨域访问的问题

一.首先在config目录下新建一个js文件，proxyConfig.js

二.proxyConfig.js文件内容

module.exports = {
  proxyList: {
        '/apis': {
            // 测试环境
            target: 'https://xxx.xx.cn',  // 接口域名
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/apis': ''   //需要rewrite重写的,
            }              
        }
  }
}

三.config/index.js文件引入新增的proxyConfig.js文件

var proxyConfig = require('./proxyConfig')//引入新增文件proxyConfig.js

proxyTable: proxyConfig.proxyList,//proxyTable引入新增文件

'use strict'
// Template version: 1.1.3
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
var proxyConfig = require('./proxyConfig')//引入新增文件proxyConfig.js

module.exports = {
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: false,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    dev: {
        env: require('./dev.env'),
        port: process.env.PORT || 9000,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: proxyConfig.proxyList,//proxyTable引入新增文件
        //proxyTable: {},
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
    }
}

四：axios调用接口