vue項目中，前端與后臺進(jìn)行數(shù)據(jù)請求或者提交的時候，如果后臺沒有設(shè)置跨域，前端本地調(diào)試代碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。
要想本地正常的調(diào)試，解決的辦法有三個：
一、后臺更改header
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
這樣就可以跨域請求數(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(',')
}
})
}
}
通過這種方法也可以解決跨域的問題。
三、使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）
例如請求的url:“/business/remind/user”
1、打開vue.config.js.js,在proxy中添寫如下代碼：
// 運(yùn)行配置
devServer: {
port: '9527', //代理端口
open: false, //項目啟動時是否自動打開瀏覽器，我這里設(shè)置為false,不打開，true表示打開
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重寫路徑
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我們設(shè)置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務(wù)器的數(shù)據(jù)呢
// 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實際上應(yīng)該請求那里，
// ‘我是服務(wù)器/api’，后面的/api根據(jù)實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
// 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 = {
// 沒有書寫outputDir屬性 默認(rèn)'dist' 對應(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被廢除了，因此這邊要寫成 publicPath ( 資源地址 )
publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' ,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項
loaderOptions: {}
// 啟用 CSS modules for all css / pre-processor files.
// modules: false
},
// 運(yùn)行配置
devServer: {
port: '8222', //代理端口
open: false, //項目啟動時是否自動打開瀏覽器，我這里設(shè)置為false,不打開，true表示打開
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重寫路徑
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我們設(shè)置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務(wù)器的數(shù)據(jù)呢
// 因此這里的意義在于， 以 /api開頭的url請求，代理都會知道實際上應(yīng)該請求那里，
// ‘我是服務(wù)器/api’，后面的/api根據(jù)實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
// https://我是服務(wù)器/api/test/test
}
}
},
chainWebpack: config => {
// 提示輸出的哪個地址
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') {
// 測試生產(chǎn)環(huán)境, 不壓縮js代碼
if (process.env.VUE_APP_TITLE === 'alpha') {
config.optimization.minimize(false)
}
}
//set第一個參數(shù)：設(shè)置的別名，第二個參數(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 沒必要配置
config.plugin('html')
.tap(args => {
args[0].title = '公募綜合業(yè)務(wù)平臺'
return args
})
}
}
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.ocunn.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
