解决开发跨域环境. 使用代理proxy_proxy 里边写的开发环境是自己本地ip么-优快云博客

本文介绍了如何在Vue项目中修改开发环境的API基础地址，并配置proxy以解决跨域问题，包括了直接匹配、路径重写以及不同场景下的代理规则设置。

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

第一步..在 env.development 中修改. 开发环境

 # 第一步
VUE_APP_BASE_API ='/api'

-------------------------------------------

'/api' 这个可以随意填写.

import axios from 'axios'
const _axios = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

VUE_APP_BASE_API  //这个和自己的配置有关系.

第二步..找到vue.config.js 文件

 devServer: {

    proxy: {
      '/api': //这里是你第一步配置的对应  基地址{
        target: 'http://localhost:3000'

        // 因为我自己本身的是  http://localhost:3000/api 所以我省略
        // 否则会在最后默认拼接/abc
        // 如果及地址不是你默认的/拼接.就使用下面方法去除.如果不去除结果就是
        // http://localhost:3000/abc
        // pathRewrite: {
        //   '^/abc': ''
        // }
      }
    }
}

-----------------------------------------------------
//'设置与自己接口拼接默认一致的情况下.不添加忽视'
 proxy: {
      '/api': {
        target: 'http://localhost:3000'
      }
    }

----------------------------------------------------
//如果不一样请添加忽视
 proxy: {
      '/abc': {
        target: 'http://localhost:3000/api'
         pathRewrite: {
           '^/abc': ''  //忽视为空.代表不需要拼接 否则效果 http://localhost:3000/api/abc
         }
      }
    }

方法2

1.创建一个文件夹. C:\aaa

2.创建一个谷歌浏览器的快捷方式

3.在快捷方式点右键=>属性=>目标移动到最后，加入空格，粘贴 --disable-web-security --user-data-dir=C:\aaa

//注意这里是在目标地址的最后面. 加上一个空格再复制下面全部代码

--disable-web-security --user-data-dir=C:\aaa

4.点击确定，打开后就是跨域浏览器