我正在使用vue-cliwebpack-simple模板生成我的项目,我想将请求代理到一个单独的后端服务器.这怎么容易做到呢?

推荐答案

如果使用webpack模板和vue-cli模板,则可以在本参考文件中找到所需信息:

http://vuejs-templates.github.io/webpack/proxy.html

或者,您可以将相关配置从webpack模板复制到本地webpack-simple模板,而不是现在更改模板.

EDIT: more info from my local setup

这是我在config/index.js岁以下的module.exports岁以下 children 中所拥有的:

dev: {
    env: require('./dev.env'),
    port: 4200,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true
        },
        '/images': {
            target: 'http://localhost:8080',
            changeOrigin: true
        },
        // and so on...

上面的配置在端口4200上运行我的vue-cli,我在端口8080上运行我的服务器.

EDIT: Corrected info about CORS after comment #4 and #5

Note:

  • dev.proxyTable中的changeOrigin选项(在webpack配置中)确保您不需要在服务器API响应上提供CORS头.
  • 如果出于任何原因决定省略changeOrigin,那么需要确保服务器API在其响应头中包含Access-Control-Allow-Origin: *(或等效值).

References:

  1. https://stackoverflow.com/a/36662307/654825
  2. https://github.com/chimurai/http-proxy-middleware

Vue.js相关问答推荐

获取深度嵌套对象时无法读取空/未定义的属性

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

在VITE-VUE APP-DEV模式上重定向HTTP请求

Shopware 6,使用 vue-test-utils 进行Jest 测试:渲染模板上的意外行为

如何使用 vue.js 和 vue 路由实现当前路由的子菜单的子菜单

如何 for each 用户分组聊天消息?

Vuetify Datatable - 在所有列上启用内容编辑

Vuetify 在数据表中插入操作按钮并获取行数据

Polyfill for ie

导入没有 .vue 扩展名的 *.vue 文件时出现以下错误?

SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义

如何使用 vue.js 获取所选选项的索引

如何在 VueJS 中访问 [__ob__: Observer] 的元素?

如何在 Vue 中动态创建组件上获取更新的 $refs?

如何将项目推送到 Vuejs 中数据对象的数组中? Vue 似乎没有关注 .push() 方法

Vuejs 3 从子组件向父组件发出事件

无法访问函数内的数据属性

Vuejs 不会在 HTML 表格元素中呈现组件

如何访问通用 javascript 模块中的当前路由元字段

隐藏特定标题及其在 vuetify 数据表中的对应列