vue解決跨域問題的方式（個人技術博客）

一、技術概述

現在項目都是前后端分離開發，在發送請求時有可能會出現跨域問題。跨域問題的產生原因很多，可能是域名不同，或者是域名相同但是接口不同等。最好的解決方法就是后端更改header，但是有的時候這樣的方法還是會出現跨域問題，這時候就可以通過vue-cli中的配置來解決跨域問題。

二、技術詳述

使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）
打開config/index.js,在proxyTable中添寫如下代碼：

      '/api': {
        target:'http://129.204.247.165/',
        changeOrigin:true,
        pathRewrite:{
          '^/api': ''
        }
      }
    },

main.js里面加入:

import axios from 'axios'
Vue.prototype.$axios = axios

使用axios:

method: 'post',
       url: '/api/posts/gethotbystatus',
       data:qs.stringify({
         day:20,
         status:0
       }),
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
       },
     }).then(function (res) {}

三、可能遇到的問題和解決方式

主要的問題就是不用vue-cli腳手架只單單導入vue.js包不能解決跨域.所以解決的過程就是安裝vue-cli腳手架

四、總結

以后如果后端修改了header還不能解決跨域問題,用vue來解決就是一個很好的方法

五、參考文獻

Vue中跨域問題解決