在開發的時候,爲了防止跨域的問題,其實能夠直接在vue裏配置proxy代理。我使用的是vue cli4。
1,找到項目根目錄的vue.config.js文件。
2,配置devServer
對象。
配置以下:css
module.exports = { publicPath: process.env.NODE_ENV === "production" ? "./" : "./", lintOnSave: false, productionSourceMap: false, css: { sourceMap: false }, devServer: { disableHostCheck: true, //下面這種便可 proxy: { "/channel": { target: "http://192.168.0.10:8080",//接口的地址 changeOrigin: true, pathRewrite: { // "^/kuai": "" } }, }, //這種方式不支持 // proxy: { // context: ["/token", "/channel", "/common", "/file", "/callback"], // target: "http://10.0.98.105:8080", // changeOrigin: true, // secure: false // } }, chainWebpack: config => {}, configureWebpack: config => { if (process.env.NODE_ENV === "production") { return { plugins: pluginList }; } } };
由於我發起請求時是請求/ 因此默認是本地vue項目的啓動地址,加了代理後,只要匹配上了 /channel就會自動轉發到代理的地址上。
瀏覽器就認爲請求的是本地,因此就不會出現跨域的問題了。vue