解決方案

解決跨域的方法很多　後端有設定請求   前端有jquery的jsonp、script的請求轉發等，出現跨域問題主要時因為瀏覽器的同源策略，所以只要在中間做個代理請求，就可以巧妙的避開跨域問題

一，使用proxyTable屬性

  這裡vue腳手架生成的標準專案為準。一般在專案config目錄下面有個index檔案。裡面格式如下：

'use strict'
const path = require('path')
module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:7001',//後端介面地址
                changeOrigin: true,//是否允許跨越
                pathRewrite: {
                    '^/api': '/api',//重寫,
                }
            }
        },
        host: '192.168.0.104',
        port: 8081,
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false,
        useEslint: true,
        showEslintErrorsInOverlay: false,
        devtool: 'eval-source-map',
        cacheBusting: true,
        cssSourceMap: false,
    },

}
 

二，通過ngnix中的proxy代理實現請求的轉發

三、使用webpack的外掛後端程式代理

  當然上面2個方法都需要後端的配合和需要修改伺服器配置。所有還有一種方法不需要他們配合 ，我們自己就可以做到。就是我們自己啟一個後端程式做代理。然後把所有的請求轉發到伺服器。這裡要用到node的一個包http-proxy-middleware。關鍵程式碼(express)如下

var express = require('express');
var proxy = require('http-proxy-middleware');


var proxyTable = config.dev.proxyTable;



var app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}



Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})