vue项目配置代理解决跨域

vue.config.js:

  devServer: {
    // 反向代理配置
    proxy: {
      '/api': {
        target: 'https://www.baidu.com',
        ws: true,
      }
    }
  },

https://cli.vuejs.org/zh/config/#devserver-proxy


 

devServer.proxy #

  • Type: string | Object

    如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

    devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

    module.exports = {
      devServer: {
        proxy: 'http://localhost:4000'
      }
    }
    

    这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

    如果你想要更多的代理控制行为,也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware

什么是 Vue? #

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

下面是一个最基本的示例:

posted @ 2022-09-23 16:17  徐同保  阅读(17)  评论(0)    收藏  举报  来源