Ⅰ 解決Vue http中的跨域問題
在平常的項目開發當中，很容易遇到跨域的問題，好在vue-cli的腳手架提供了跨域的解決方案，在config下的index.js中有個proxyTable屬性，在其中添加如下配置:
proxyTable: {
'/api':{
target:'http://localhost:8090',
changeOrigin:true,
pathRewrite:{
}
}
如上所示，如果在8090後在加路徑，則無效（親測）；
在pathRewite中可以添加替換，因為在正常代理過後會在路徑結尾有ap這個路徑，所以如果實際的地址和這個不同，則可以進行替換。
Ⅱ vue.js使用http-proxy-middleware解決跨域請求問題
最近在使用vue-cli搭建項目的過程中，遇到了跨域請求數據的問題，這里貼出我的解決方法，希望對大家有所幫助。
什麼是跨域請求：
如果在A網站中，我們希望使用Ajax來獲得B網站中的特定內容，如果A網站與B網站不在同一個域中，那麼就出現了跨域訪問問題。由於瀏覽器同源策略，凡是發送請求url的協議、域名、埠三者之間任意一與當前頁面地址不同即為跨域。
這里，數據請求用的是vue-resource(目前vue官方是推薦使用axios)，安裝插件：
npm install--save-devvue-resource
1
在main.js中引入插件：
importVueResourcefrom'vue-resource'
Vue.use(VueResource)
這里，解決跨域使用的是http-proxy-middleware來進行介面代理，安裝方法同上：
npm install--save-devhttp-proxy-middleware
下面開始談正事，舉個栗子：
本地項目地址是：localhost:8080，現在我們要訪問 http://m.maizuo.com/v4/api/film/comming-soon 和 http://m.maizuo.com/v4/api/billboard/home 這兩個線上地址：
首先，設置build/dev-server.js：
varproxyMiddleware =require('http-proxy-middleware')
varserver = express()
server.middleware = [ proxyMiddleware(['/film/coming-soon'], {target:'http://m.maizuo.com/v4/api', changeOrigin:true}), proxyMiddleware(['/billboard/home'], {target:'http://m.maizuo.com/v4/api', changeOrigin:true})];
server.use(server.middleware);
注意，當要訪問多個線上地址時，公共的地址部分寫在target屬性值裡面，比如這里的 http://m.maizuo.com/v4/api ，然後[ ]里邊寫地址的不同部分。
然後，修改config/index.js :
dev:{env:require('./dev.env'), port:8080, proxyTable: {'/api': { target:'http://m.maizuo.com/v4/api', changeOrigin: true, pathRewrite: {'^/api':''} } } }
這里的target同上面的一樣，然後』/api』和』^/api』代表的就是這個根目錄地址；
然後，在頁面中具體的調用為：
this.$http.get('api/billboard/home').then((response) => {
});
這里，url的值為api + [ ] 中的部分 ;
然後，我們就解決了vue中的跨域問題 ;
這里，貼一下http-proxy-middleware插件的github地址，看更多用法 :
https://github.com/chimurai/http-proxy-mid
Ⅲ VUE本地跨域解決方案
我們前端使用介面時，時常遇到跨域問題，一般都是後台設置開放訪問許可權備啟讓解決跨域，如果後台不配合或者為了安全問題而不能開放許可權，那麼我們前端只能自己解決跨域問題了！！！直接再問vue中使用nodeJS進行代理就可以解決跨域問題。
1、首先找到項目所在的config文件下的index.js，打開此文件；
2、找到mole.exports裡面的dev模塊，dev:{ proxyTable:{ } };
將target設置成你想跨域的域名，
changeOrigin設置旁罩成true（即：允許跨域）；
pathRewrite設置新的路徑，這個其實沒有必要重新設置仿局；
host設置成：localhost；
port設置成自己本地項目的埠號如：8001；
3、找到main.js並打開，添加：Vue.prototype.HOST = '/api' //設置全局的請求域名；這樣就可以全局使用了！
4、在請求介面的頁面這樣請求介面就可以啦：
var urls = this.HOST +'/login/get/dingdingUser';//this.HOST就是你跨域的域名，這樣就可以直接跨域了；這時urls就是你的介面名稱啦！！！
Ⅳ vue 如何實現跨域
跨域問題是因為瀏覽器的同源策略引起的，一種瀏覽器的安全機制，要求 協議，域名，埠 ，都要一致！
出於瀏覽器的同源策略限制，瀏覽器會拒絕跨域請求。
什麼叫跨域？非同源請求，均為跨域。名詞解釋：同源 —— 如果兩個頁面擁有相同的協議（protocol），埠（port）和主機（host），那麼這兩個頁面就屬於同一個源（origin）。
怎麼解決跨域？最常用的三種方式： JSONP、CORS、postMessage 。
jsonp，只支持get，不支持post，需要調用前端和被調用後端配合（比較常用）
後端HttpClient進行轉發，兩次請求，效率低，安全（類似Nginx反向代理）
服務端設置響應頭，允許跨域，適於小公司快速解決問題
Nginx搭建API介面網關
Zuul搭建API介面網關
後四種都屬於服務端設置，對於目前還是一個純前端的我來說，先把前端的搞懂再說，所以在此只說前端
jsonp工作原理理解
jsonp實際上是通過動態插入js的方式實現的跨域，因為通過script標簽引入js文件沒有跨域一說
web客戶端通過調用腳本的方式去調用跨域服務端動態生成的js文件（一般以json為後綴），同時傳遞一個callback參數給服務端，服務端以這個參數名為函數名，調用此函數以參數的形式將數據傳到web端，這樣就實現了前端跨域請求服務端數據。
【JSONP的優缺點】
優點：兼容性好（兼容低版本IE）
缺點：1.JSONP只支持GET請求； 2.XMLHttpRequest相對於JSONP有著更好的錯誤處理機制
CORS ：是W3C 推薦的一種新的官方方案，能使伺服器支持 XMLHttpRequest 的跨域請求。CORS 實現起來非常方便，只需要增加一些 HTTP 頭，讓伺服器能聲明允許的訪問來源。
postMessage : window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬於同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持 window.postMessage方法。
Ⅳ vue vue.config.js常見配置、介面跨域代理和多服務配置
參考官歲鏈網 https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
這樣我們就可以根據路徑起始乎尺孫的不同前綴來訪問不同的困碧服務介面
Ⅵ Vue項目中跨域問題的解決
在Web端Vue項目開發過程中，跨域問題是不可避免的；在我參與的Vue項目中，使用伺服器代理的解決方案；針對不同的環境（開發環境/生產環境），採用了不同的伺服器代理方案；
伺服器代理的原理大概是這樣：
代理伺服器和訪問源（請求端）是同源的，但和被訪問伺服器（資源端）是不同源的，但伺服器之間的訪問不受瀏覽器同源策略的影響(即不必擔心是否有跨域問題)，那麼我們即可請求到同源伺服器上的從被訪問伺服器上的獲取到的請求資源了 ；
這樣配置完成後，我們發起的每次http請求的Request Url的前面一部分都會和我們本地的源一樣；
舉例：
我們項目跑在開發環境下的 http://localhost:8080 上，那麼上述請求的Request Url的就是 http://localhost:8080/api/bookCate ;這應該就是我們的代理伺服器中該資源的地址，與客戶端同源；而數據的實際來源則是 http://219.216.5.26:8080/api/bookCate ，這樣即實現代理跨域；
目前猜測這個代理伺服器可能是Node；
nginx 版本： 1.16.1
修改 nginx.conf 文件下的 serve 下配置：
舉例：
生產環境下的,我們項目跑Nginx伺服器監聽的 http://localhost:8088 上，那麼上述請求的Request Url的就是 http://localhost:8088/api/bookCate ;
這應該就是我們的代理伺服器中該資源的地址，與客戶端同源；
而數據的實際來源則是 http://219.21.5.5:9903/api/bookCate ，這樣即實現代理跨域；
Ⅶ 在vue項目中配置proxy解決跨域問題
1.問題：
後端給的介面是：https://stg-pteppp.leanapp.cn/h5/jsconfig.前端在本地開發中調用該介面跨域。
2.解決方案：
* 在webpack中配置proxy。如下圖所示
如上：
1. target是你要代理的域名，必須要加上http。
2. 這里用'/api'代替target裡面的地址，組件中調用介面時直接用'/api'代替。比如我要調用'https://xxx.com/news.直接寫'/api/news'即可
3. changeOrigin必須為true
* 在頁面中請求寫法如下：
開心吧。數據終於拿到啦！！！
我們知道，vue2.0項目中的static文件夾存儲的是靜態資源，可以直接被訪問到的，如果我們將mock的數據放入static文件夾，在瀏覽器中直接訪問http://localhost:8080/static/json/list.json發現是可以訪問到數據的。於是我們在頁面將mock數據的請求寫成下面這樣：
則需要在webpack中做如下配置：
注意這里的http一定不能省略，否則數據請求不到。這樣做的好處是在本地開發時mock的介面和線上的介面一致，避免上線前大量改動介面名稱。
Ⅷ vue-cli跨域 vue使用axios請求介面怎麼操作
全局使用Axios
首先，顫晌在自己建的公用方法的文件中new一個新的HttpUtil.js文件。以下為茄拿鋒HttpUtil.js的內容：
var axios = require('axios')// 配置項目根如路徑var root = 'http://localhost:8090/manage'// axios請求function httpApi (method, url, params) { return new Promise((resolve, reject) => { axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }).then(
(response) => {
resolve(response)
}
).catch(
(error) => {
reject(error)
}
)
})
}// 返回在vue模板中的調用介面export default { get: function (url, params) { return httpApi('GET', url, params)
}, post: function (url, params) { return httpApi('POST', url, params)
}, put: function (url, params) { return httpApi('PUT', url, params)
}, delete: function (url, params) { return httpApi('DELETE'敏祥, url, params)
}
}
Ⅸ vue.js不使用手腳架如何跨域請求介面
這個問題問的很不世灶談明確，搜碰只能進行猜測。
跨域的問題，對於老手而言，不是問題，那麼我猜你應該是本地開發遇見了問題，因為在本地瀏覽器的開發可能辯亮會因為瀏覽器的安全策略遇見跨域問題。
最簡單的方法去把對應的包下載下來本地調用，你可以直接去官網或者是 GitHub 上下載。
如果是 Chrome 瀏覽器解除跨域限制的話：
先新建一個目錄，例如：C:MyChromeDevUserData
再新建一個 chrome 瀏覽器的快捷方式，推薦取名為「chrome-debug」作為區分，右擊它然後在屬性頁面中的目標輸入框里加上 --disable-web-security --user-data-dir=C:MyChromeDevUserData，這里--user-data-dir 的值就是剛才新建的目錄。
點擊應用和確定後關閉屬性頁面，並打開chrome瀏覽器。再次打開chrome，發現有「--disable-web-security」相關的提示，說明chrome又能正常跨域工作了。
跨域成功後，而稍微想一想，C:MyChromeDevUserData其實就是新建一個新的用戶目錄，然後你使用這個解除了安全限制的新用戶去進行開發，但注意不要用來上網。
如果是 Firefox 瀏覽器解除跨域限制的話：
地址欄輸入 about:config
將 security.fileuri.strict_origin_policy 改為 false
將 security.mixed_content.block_active_content 改為 false
註：瀏覽器可能會對自己的安全策略升級，我只能保證第一種和第二種方法都是近期可用的。
其次，比較小的可能是想知道如何進行跨域，這種方法就超多，而且寫太長也不好，我只推薦你自己去 MDN 網上面去搜索「跨域」。
Ⅹ vue跨域解決方法
vue跨域解決方法
使用axios請求
第一步驟
在vue.config.js 文件中 mole.exports = { } 中添加
devServer: {
proxy: {
'/profile': { //指定 路徑 要 跨域請求地址
// 在本地會創建一個虛擬服務端，然後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
// 將/api開頭的url轉發到target上。
target: ' https://sso.www.eee.cn/profile',// 跨域請求地址
changeOrigin: true, //虛擬的站點需要更管origin
ws: true, // 代理websockets
secure: true, // 如果是https介面，需要配置這個參數
pathRewrite: {
// 顧名思義，將/api重寫為 / 此時url變為 http://192.168.101.110:8888/ 而不是 http://192.168.101.110:8888/api
'^/profile': ''
}
}
}
第二步驟
在封裝axios請求中設置
const service = axios.create({
baseURL: '/profile',//定義要跨域的介面路徑
withCredentials: true,//是否支持跨域
timeout: 500000, // request timeout
headers: {
'Cache-Control': 'no-cache',
'Content-Type': 'application/x-www-form-urlencoded'
}
});