vue項(xiàng)目中，前端與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候，如果后臺(tái)沒(méi)有設(shè)置跨域，前端本地調(diào)試代碼的時(shí)候就會(huì)報(bào)“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯(cuò)誤。

要想本地正常的調(diào)試，解決的辦法有三個(gè)：

一、后臺(tái)更改header

header('Access-Control-Allow-Origin:*');//允許所有來(lái)源訪問(wèn)
header('Access-Control-Allow-Method:POST,GET');//允許訪問(wèn)的方式

這樣就可以跨域請(qǐng)求數(shù)據(jù)了

二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)

methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}

通過(guò)這種方法也可以解決跨域的問(wèn)題。

三、使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）

例如請(qǐng)求的url:“/business/remind/user”
1、打開(kāi)vue.config.js.js,在proxy中添寫(xiě)如下代碼：

// 運(yùn)行配置
devServer: {
port: '9527', //代理端口
open: false, //項(xiàng)目啟動(dòng)時(shí)是否自動(dòng)打開(kāi)瀏覽器，我這里設(shè)置為false,不打開(kāi)，true表示打開(kāi)
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重寫(xiě)路徑
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我們?cè)O(shè)置了代理，則所有請(qǐng)求url都已寫(xiě)成/api/xxx/xxx，那請(qǐng)求如何知道我們到底請(qǐng)求的是哪個(gè)服務(wù)器的數(shù)據(jù)呢
// 因此這里的意義在于， 以 /api開(kāi)頭的url請(qǐng)求，代理都會(huì)知道實(shí)際上應(yīng)該請(qǐng)求那里，
// ‘我是服務(wù)器/api’，后面的/api根據(jù)實(shí)際請(qǐng)求地址決定，即我的請(qǐng)求url：/api/test/test，被代理后請(qǐng)求的則是
// https://我是服務(wù)器/api/test/test
}
}
},

附帶vue.config.js下的代碼

const chalk = require('chalk')
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)

}
module.exports = {
// 沒(méi)有書(shū)寫(xiě)outputDir屬性 默認(rèn)'dist' 對(duì)應(yīng)dev.assetsSubDirectory
outputDir: 'dist',
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
//在vue-cli.3.3版本后 baseUrl被廢除了，因此這邊要寫(xiě)成 publicPath ( 資源地址 )
publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' ,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開(kāi)啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {}
// 啟用 CSS modules for all css / pre-processor files.
// modules: false
},
// 運(yùn)行配置
devServer: {
port: '8222', //代理端口
open: false, //項(xiàng)目啟動(dòng)時(shí)是否自動(dòng)打開(kāi)瀏覽器，我這里設(shè)置為false,不打開(kāi)，true表示打開(kāi)
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重寫(xiě)路徑
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我們?cè)O(shè)置了代理，則所有請(qǐng)求url都已寫(xiě)成/api/xxx/xxx，那請(qǐng)求如何知道我們到底請(qǐng)求的是哪個(gè)服務(wù)器的數(shù)據(jù)呢
// 因此這里的意義在于， 以 /api開(kāi)頭的url請(qǐng)求，代理都會(huì)知道實(shí)際上應(yīng)該請(qǐng)求那里，
// ‘我是服務(wù)器/api’，后面的/api根據(jù)實(shí)際請(qǐng)求地址決定，即我的請(qǐng)求url：/api/test/test，被代理后請(qǐng)求的則是
// https://我是服務(wù)器/api/test/test
}
}
},
chainWebpack: config => {
// 提示輸出的哪個(gè)地址
console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') +
chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
// 判斷不同環(huán)境 做相應(yīng)處理
if(process.env.NODE_ENV === 'production') {
// 測(cè)試生產(chǎn)環(huán)境, 不壓縮js代碼
if (process.env.VUE_APP_TITLE === 'alpha') {
config.optimization.minimize(false)
}
}
//set第一個(gè)參數(shù)：設(shè)置的別名，第二個(gè)參數(shù)：設(shè)置的路徑
config.resolve.alias
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('assets',resolve('./src/assets'))
.set('views',resolve('./src/views'))
.set('network',resolve('./src/network'))
//注意 store 和 router 沒(méi)必要配置

config.plugin('html')
.tap(args => {
args[0].title = '公募綜合業(yè)務(wù)平臺(tái)'
return args
})
}
}

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( m.wtxcl.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司。