vue 跨域配置(過程與問題解決)proxyTable配置

1.配置
main.js配置

/*ajax請求*/
import axios from 'axios'
axios.defaults.baseURL = 'http://www.projet1.com/';
// var AUTH_TOKEN = 'ss';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

寫在new vue 前面

config/index.js中proxyTable配置

proxyTable: {
        '/api': {
          target: 'http://www.projet1.com/',//設置你調用的接口域名和端口號 別忘了加http、https
          changeOrigin: true,//是否跨域
          // secure: true, // 允許https請求
          pathRewrite: {
            '^/api': '/'//這裏理解成用‘/api’代替target裏面的地址
          }
        }
    },

這裏坑最大,如果還是報錯,先要理解pathRewrite的含義:

用代理, 首先你得有一個標識, 告訴他你這個連接要用代理. 不然的話, 可能你的 html, css, js這些靜態資源都跑去代理. 所以我們只要接口用代理, 靜態文件用本地.’/api’: {}, 就是告訴node, 我接口只要是’/api’開頭的才用代理.所以你的接口就要這麼寫 /api/xx/xx. 最後代理的路徑就是 http://xxx.xx.com/api/xx/xx.
可是不對啊, 我正確的接口路徑裏面沒有/api啊. 所以就需要 pathRewrite,用’’^/api’’:’’, 把’/api’去掉, 這樣既能有正確標識, 又能在請求接口的時候去掉api

然後你覺得配置都正確了,還是不對,可以換個瀏覽器後者重啓電腦試試,反正我最後是換了瀏覽器就可以了。。(坑啊!!!)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章