vue項目中axios的跨域問題

最近被這個axios的跨域問題弄得頭疼，因爲我的項目配置實在是不到位，先來看看我的axios請求代碼

然後看看沒有設置跨域而出現的問題

此時我的數據可以傳送到後臺並存入數據庫，但是後臺返回的數據我無法接收
經過分析，我的發現主要問題是代碼中的api無法映射到配置文件中設置的api
config/index.js:

在網上找了很多原因，我甚至把axios的中文文檔又讀了兩遍，後來發現問題所在的幾個可能：
1.項目並非使用vue-cli搭建
我的項目是使用iView官網的項目，而不是使用vue-cli腳手架搭建的,因此我的項目中沒有config文件夾

而我的api是在index.js裏配置的，是我自己新建config文件夾以及其中三個js文件自行寫入，發現這樣api無法渲染到組件中的api。
解決方法：我老老實實的安裝vue-cli
npm i -g vue-cli
然後就卡在安裝那裏不動了，接着我換成cnpm i -g vue-cli發現可以了
2.npm的版本問題
在安裝完vue-cli並配置完之後，我npm run dev重啓了項目
報了這個錯
[HPM] Error occurred while trying to proxy request /login from localhost:8888 to localhost:8080/ssm-p (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)
發現是npm版本的問題，npm 是隨 node.js 一起發佈的包管理工具，默認採用的並不一定是最新版本，我使用了以下命令：
cnpm -g install npm ( 會更新到最新穩定版 )
然後再重啓項目
3.api配置錯誤
代理寫錯，需要在域名前寫上http://

4.在webpack.config.js加入配置
如果以上三個問題解決了依然出現錯誤，我們可以在webpack.config.js的devServer中加入代理來實現

devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080/ssm-p',
        changeOrigin: true,		//是否允許跨域
      }
    }
  }

試一下，跨域成功了，但是注意了，!!!這只是開發環境（dev）中解決了跨域問題，生產環境中真正部署到服務器上如果是非同源還是存在跨域問題，如我們部署的服務器端口是3001，需要前後端聯調，第一步前端我們可以分生產production和開發development兩種環境分別測試，在config/dev.env.js和prod.env.js裏也就是開發/生產環境下分別配置一下請求的地址API_HOST，開發環境中我們用上面配置的代理地址api，生產環境下用正常的接口地址，所以這樣配置
config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',		//開發環境
    API_HOST:"/api/"
})

config/prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',		//生產環境
    API_HOST:'"http://localhost:8080/ssm-p'
}

至此，大功告成