vue2.0跨域

YYY1920

于 2020-12-15 21:09:30 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

文章标签： vue proxy 接口

本文链接：https://blog.youkuaiyun.com/YYY1920/article/details/111240435

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

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

设置反向代理
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