vue2.0跨域

配置跨域：Vue项目中实现API代理设置教程

最新推荐文章于 2023-08-04 10:45:28 发布

原创最新推荐文章于 2023-08-04 10:45:28 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #proxy #接口

本文详细介绍了如何在Vue项目中通过`config/index.js`设置反向代理，配置开发环境(dev)、线上/prod环境的API接口，并利用axios处理跨域问题。步骤包括配置proxyTable，重写路径和启用CORS。重启项目后，确保正确使用'/api'前缀的API调用。

设置反向代理
config -> index.js -> 文件设置反向代理
在这里插入图片描述

 dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath:'/',
    proxyTable: {
      '/api': {
        target: 'https://studioapi.bangniyin08.com', // 需要跨域请求的地址或者IP
        changeOrigin: true, //  表示是否跨域
        pathRewrite: {
            '^/api': '' // 表示需要rewrite重写的
        }
    }
    },

配置api
config -> dev.env.js
在这里插入图片描述
配置线上/测试api
config -> prod.env.js