在做一個vue+node的個人博客時，突然想如果前臺在開發(fā)環(huán)境下可以和服務(wù)端連起來測試就好了。但是由于端口不同，所以得跨域請求了，但是前臺開發(fā)完后，是不是全部URL都要改？
于是搜索了一下，發(fā)現(xiàn)了“proxyTable”。

修改config/文件夾下的index.js

dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {//虛擬目錄
        target: 'http://127.0.0.1:3000',//地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//由于上面的虛擬目錄實際上是不存在的，不去掉的話訪問的時候顯示的url會變成'http://127.0.0.1:3000/api'，所以得去掉
        }
      }
    },

配置了上面的參數(shù)后，在調(diào)用時就要（這里用的是axios,例如地址是http://127.0.0.1:3000/aaa）

axios.post('/api/aaa', {})
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

為什么要有個‘/api’？因為步驟1那里寫的是‘/api’,那怎么辦?別忘了，因為用的是axios，所以可以配置一下baseURL ，我這里就全局配置baseURL

axios.defaults.baseURL = '/api'

這樣就可以通過代理訪問服務(wù)端了

如果不想通過代理而是直接訪問服務(wù)端，那就在服務(wù)端配置允許所有域訪問

配置服務(wù)端

服務(wù)端我用的是express框，不借助其它包可以這樣配置

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (req.method == 'OPTIONS') {
        res.send(200);
        /*讓options請求快速返回*/
    } else {
        next();
    }
});

然后用cors，可以這樣配置

//獨自設(shè)置
var cors = require('cors');
app.post('/aaa',cors(), ...);

//全局設(shè)置
var cors = require('cors')
var app = express()
app.use(cors())

更多用法請參考cors

大功告成啦！可以愉快地繼續(xù)寫代碼啦