這篇文章給大家分享的是有關如何解決Vue開發(fā)模式下跨域問題的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)專注于銅陵網(wǎng)站建設服務及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供銅陵營銷型網(wǎng)站建設,銅陵網(wǎng)站制作、銅陵網(wǎng)頁設計、銅陵網(wǎng)站官網(wǎng)定制、小程序設計服務,打造銅陵網(wǎng)絡公司原創(chuàng)品牌,更為您提供銅陵網(wǎng)站排名全網(wǎng)營銷落地服務。設置請求頭部
后端設置請求頭部Access-Control-Allow-Credentials: true
和Access-Control-Allow-Origin: www.xxx.com
前端post請求設置withCredentials=true
這里用了axios的請求數(shù)據(jù)方法代碼如下:
import axios from 'axios' import config from '../config' export default { request (method, uri, data, headerConfig = {withCredentials: true}) { if (!method) { console.error('API function call requires method argument') return } if (!uri) { console.error('API function call requires uri argument') return } let url = config.serverURI + uri return axios({ method, url, data, ...headerConfig }) } }
jQuery的$.ajax::
$.ajax({ type: "POST", url: "http://www.xxx.com/api.php", dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true }).then((json) => { // balabala... })
使用nodejs做代理
上面的那種方法需要后端配合設置頭部,對于我這種前端小白來講,聯(lián)調時各種不成功的報錯也無從解決,所以個人比較傾向于下面這種做法,鑒于使用腳手架vue-cli創(chuàng)建的項目,作者已經(jīng)給我提供好了解決的方法。
找到項目文件夾下的config/index.js, 里面有一行proxyTable: {}, 這里就是作者為我們留的接口, 我們添加代理規(guī)則進去
var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../xxx/index.html'), assetsRoot: path.resolve(__dirname, '../xxx'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true, productionGzip: false, productionGzipExtensions: ['js', 'css'] }, dev: { env: require('./dev.env'), port: 8080, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://www.xxx.com/api.php/', changeOrigin: true, pathRewrite: { '^/api': '/' } } }, cssSourceMap: false } }
這里target為目標域名,pathRewrite為轉換規(guī)則,請求數(shù)據(jù)時將接口地址 根據(jù)轉換規(guī)則請求就可以解決跨域啦?。ㄟ@里也可以配置headers,設置cookis,token等)
jsonp
jsonp也是一種解決跨域的方法,不過我從來沒有用過,在網(wǎng)上查了下資料,jsonp的原理是script標簽引入js是不受域名限制的, 由于是模擬插入script標簽, 所以不可以用post請求。
感謝各位的閱讀!關于“如何解決Vue開發(fā)模式下跨域問題”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站bm7419.com,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
分享題目:如何解決Vue開發(fā)模式下跨域問題-創(chuàng)新互聯(lián)
路徑分享:http://bm7419.com/article24/dsccje.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導航、營銷型網(wǎng)站建設、建站公司、關鍵詞優(yōu)化、域名注冊、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容