Vue:使用vue-cli向单独的后端服务器请求代理

时间:2018-04-24 14:54:43

标签: node.js express vue.js cors vue-cli

我正在使用vue-cli webpack模板来生成我的项目,并且我想将请求代理到单独的后端服务器。但是我收到了如下错误消息。

有谁可以告诉我我的编码是什么问题?

非常感谢!

错误消息

<rich:panel headerClass="panelHeader" styleClass="panel">
    <f:facet name="header">Header</f:facet>
    <rich:dataTable id="myTable" value="#{myModel}" var="k">

        <a4j:support event="onRowClick" action="#{myAction.selectItem(k, facesContext.viewRoot.viewId)}"
                            reRender="myTable"/>

            <rich:column>
                <f:facet name="header">
                        <h:outputText value="Normal Column - should be clickable"/>
                </f:facet>
                <h:outputText value="#{k.name}"/>
            </rich:column>

            <rich:column >
                <f:facet name="header">
                    <h:outputText value="Only Click on Icon should react to Mouseclick"/>
                </f:facet>
                <s:graphicImage value="/img/bin_closed.gif">
                    <a4j:support event="onclick"
                                 action="#{myAction.deleteItem(k)}"
                                 reRender="myTable"
                                 ajaxSingle="true" limitToList="true"
                                 onsubmit="if(!confirm('Really?')) { return false; }" />/>
                </s:graphicImage>
            </rich:column>

    </rich:dataTable>

</rich:panel>

config - &gt; index.js

[HPM] Error occurred while trying to proxy request from localhost:8080 to http://localhost:3000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

src - &gt; main.js

proxyTable: {
'/api':{
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
    '^/api': ''
    }
 }

src - &gt; App.vue

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routerConfig from './router.config.js' 
import Axios from 'axios'


Vue.config.productionTip = false;
Vue.prototype.$axios = Axios;
Vue.prototype.HOST = '/api';

Vue.use(VueRouter);

const router = new VueRouter(routerConfig) 

new Vue({
 el: '#app',
 router,  
 components: { App }, 
 template: '<App/>',
})

服务器

export default{

created(){
  var url = this.HOST
  this.$axios.get(url,{

  }).then((res)=>{

   console.log(res.data)

  },(res)=>{

  alert(res.status)
  })
 }
}

1 个答案:

答案 0 :(得分:1)

请执行以下操作:

npm install --save-dev concurrently

在package.json上添加到scripts

"server": "node server.js",
"go": "concurrently --kill-others \"npm run dev\" \"npm run server\""

从现在开始使用:

npm run go

当然,您可以将go重命名为您想要的任何内容。

相关问题