[JavaScript知识库]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 都可以胜任。

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