鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 請教各位前輩,vue-cli可以跨域拿到豆瓣的數(shù)據(jù),為什么不能跨域拿到本地?cái)?shù)據(jù)庫

請教各位前輩,vue-cli可以跨域拿到豆瓣的數(shù)據(jù),為什么不能跨域拿到本地?cái)?shù)據(jù)庫的數(shù)據(jù)呢?

嘗試用vue-cli來獲取本地服務(wù)器數(shù)據(jù)庫的數(shù)據(jù)但返回以下錯(cuò)誤提示,用同樣的寫法卻可以獲取豆瓣的數(shù)據(jù)。折騰來一個(gè)晚上無法解決,希望前輩們能抽空指點(diǎn)!不勝感激!

[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)

我的代碼部分
config -> index.js

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

src -> main.js

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) //啟動(dòng)路由

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  //掛載路由
  components: { App }, // 組件名
  template: '<App/>',
})

src -> App.vue

export default{

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

    }).then((res)=>{

     console.log(res.data)

    },(res)=>{

    alert(res.status)
  })
  }
}

后臺server

const express = require('express');
const mysql = require('mysql');

const db = mysql.createPool({
  localhost:'localhost',
  user:'root',
  password:'123456',
  database:'blog'
})

const server = express();

server.use('/api',(req,res)=>{

    db.query(`SELECT * FROM articles_table`,(err,data)=>{
       if(err){
         console.error(err);
         res.status(500).send('database error').end();
       }else{
         res.send(data)
       }
    })

})

server.listen(3000)

回答
編輯回答
背叛者

你這樣將/api代理到了本地3000端口,請求端口上的/api接口,就要用/api/api吧。。你試試看

2017年10月16日 07:38
編輯回答
墨染殤

參考:https://blog.csdn.net/dreamer...
在服務(wù)器端設(shè)置返回的頭部數(shù)據(jù)試試

2018年2月21日 06:46
編輯回答
入她眼

因?yàn)楝F(xiàn)在有些網(wǎng)站默認(rèn)開啟了跨域設(shè)置,使得接口即使跨域也可以訪問

2017年10月3日 01:21
編輯回答
挽青絲

應(yīng)該是你本地的api沒開啟跨域吧,現(xiàn)在推薦使用cors解決跨域問題

2018年6月15日 14:27
編輯回答
詆毀你

感謝各位前輩關(guān)注和解答,最后我用了以下辦法來解決

1、安裝

npm install --save-dev concurrently

2、將package.json的script加上

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

3、輸入命令

npm run go

然后就可以了

2018年7月14日 01:03
編輯回答
雅痞

既然可以拿到豆瓣的數(shù)據(jù),證明你前端部分寫的肯定是沒錯(cuò)的。我看了一下你的后端代碼,發(fā)現(xiàn)你用了exoress,但是貌似沒有監(jiān)聽3000端口,要監(jiān)聽了端口才是開啟server。

2018年8月14日 06:57
編輯回答
愛是癌

豆瓣API默認(rèn)開啟跨域的,因?yàn)槭情_放API,不跨域一般需要服務(wù)端中專,挺麻煩的

2017年4月12日 18:38