vue-cli3以上框架解決跨域問題

事實上，3以上的版本安裝好以后沒有主配置文件，它不像2的版本有專門的config文件夾可以處理配置，所以我們需要新建vue.config.js  【默認情況下，3以上的版本可以直接識別這個js文件，把它當做自己的配置文件】

步驟如下：

1、在項目框架的根目錄下新建文件：vue.config.js

2、重啟項目，這樣的話新建的文件就可以被識別了

3、給新建的文件內添加解決跨域的代碼部分

module.exports = {
    outputDir: 'serve',   //build輸出目錄
    assetsDir: 'assets', //靜態資源目錄（js, css, img）
    lintOnSave: false, //是否開啟eslint
    devServer: {
        open: true, //是否自動彈出瀏覽器頁面
        host: "localhost", 
        port: '8081', 
        https: false,   //是否使用https協議
        hotOnly: false, //是否開啟熱更新
        proxy: {
             '/api': {
                target: 'http://www.1707laravel.com/api', //API服務器的地址
                ws: true,  //代理websockets
                changeOrigin: true, // 虛擬的站點需要更管origin
                pathRewrite: {   //重寫路徑 比如'/api/aaa/ccc'重寫為'/aaa/ccc'
                    '^/api': ''
                }
            }
        }
    }
}

 

配置好以后就可以執行請求了，例如post請求是：

this.$axios.post('/api/register',{
     name:this.user_name,
     email:this.user_email,
     pwd:this.user_pwd,
     rpwd:this.user_rpwd,
     phone:this.user_phone,
     sex:this.user_sex
 })
  .then(function (res) {
      console.log(res);
  })