vue-cli反向代理

简介: vue-cli反向代理

如今的前后端分离的项目,前端地址和后端地址由于浏览器的同源策略存在跨域问题,所以我们很多时候需要通过不同的方法(比如JSONP,CORS,设置代理)解决跨域问题,这里在vue项目中使用了vue-cli反向代理的方式解决


  • 在我们开发环境中前端地址访问本地的后端vue-cli地址不存在跨域问题,本地vue-cli后端访问后端服务器也不存在跨域,所以我们可以设置vue-cli反向代理给后端服务器,解决跨域的问题


  • 这里设置vue-cli项目中的vue.config.js的配置文件下的devServer节点下的proxy属性解决


module.exports = {
  devServer: {
    // 代理配置
    proxy: {
      // 当我们本地访问带有/api的时候才会触发跨域
      '/api': {
        target: 'wwww.xxx.com', // 要代理的地址
        changeOrigin: true, // 是否跨域,需要设置为true
        // 路径重写
        pathRewrite: {
          // 路径重写默认 localhost: xxx/api/abc => www.xxx.com/api/abc
          '^/api': '' // 设置为 localhost: xxx/api/abc => www.xxx.com/abc
        }
      }
    }
  }
}
相关文章
|
5天前
|
资源调度 JavaScript 前端开发
一文带你了解和使用vue-cli(2024年11月)
欢迎来到我的博客!我是一名热爱前端技术的大一学生,自学JavaScript与Vue已两年半,目前正向全栈工程师迈进。如果你从我的博客中有所收获,欢迎关注我,我会持续更新更多优质内容,一起成长!🎉🎉🎉
一文带你了解和使用vue-cli(2024年11月)
|
1月前
|
JavaScript 前端开发 Java
vue2知识点:vue-cli脚手架配置代理服务器
vue2知识点:vue-cli脚手架配置代理服务器
51 7
|
6月前
vue-cli 3.0 配置
vue-cli 3.0 配置
54 0
|
11月前
|
JavaScript
Axios简单使用与配置安装-Vue
Axios简单使用与配置安装-Vue
|
负载均衡 JavaScript 安全
vue配置反向代理的使用
vue配置反向代理的使用
209 0
|
JavaScript 安全 API
Vue 配置正向代理的使用
Vue 配置正向代理的使用
109 0
|
JavaScript 前端开发 中间件
前端vue配置反向代理 proxy
前端vue配置反向代理 proxy
525 0
|
Web App开发 JavaScript 前端开发
【Vue五分钟】 Vue Cli脚手架安装配置
这个脚手架是一个基于Vue快速进行的开发的完成系统;是基于webpack构建开发的,带有合理的配置,可以通过项目的文件进行配置。
【Vue五分钟】 Vue Cli脚手架安装配置