vue2跨域問(wèn)題解決[前端方法]
前端項(xiàng)目中常見的跨域報(bào)錯(cuò)如下：
Access to XMLHttpRequest at 'https://xxx.com/ms/' from origin 'http://10.23.30.135:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.針對(duì)這種跨域的報(bào)錯(cuò)我們可以通過(guò)后端設(shè)置 Access-Control-Allow-Origin 的header來(lái)解決，但一般前端無(wú)法去操作后臺(tái)服務(wù)所以很不方便去實(shí)現(xiàn)。
因此，可以使用vue-cli內(nèi)置的配置方法來(lái)實(shí)現(xiàn)。
解決
我們可以在vue-cli官網(wǎng)的配置參考[https://cli.vuejs.org/zh/config/#devserver]中找到devServer屬性解決跨域問(wèn)題。
在實(shí)際的項(xiàng)目中，我們需要做兩步操作來(lái)解決跨域。
1、修改我們的axios的默認(rèn)請(qǐng)求地址為/api
axios.defaults.baseURL = '/api'
上面的 /api 會(huì)作為我們代理的時(shí)候需要替換的地址，也可以自行定義，在后面vue.config.js中配置devServer屬性的時(shí)候同步修改對(duì)應(yīng)內(nèi)容即可。
2、在vue.config.js配置devServer屬性
module.exports = {
devServer: {
proxy: {
"/api": {
target: "[實(shí)際請(qǐng)求的目標(biāo)地址]",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
}
之后，重啟項(xiàng)目即可生效代理服務(wù)。
關(guān)于上面實(shí)際請(qǐng)求的目標(biāo)地址的獲取問(wèn)題：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-477723.html
比如，你實(shí)際請(qǐng)求某個(gè)服務(wù)的請(qǐng)求地址是 https://www.xxx.com/ms/users/xiaowang，這個(gè)請(qǐng)求地址主要是分為ip( https://www.xxx.com/ms/)和你寫在前端項(xiàng)目里面的接口(/user/xiaowang)，這樣上面的target屬性就填入請(qǐng)求ip( https://www.xxx.com/ms/)即可。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-477723.html
到了這里，關(guān)于vue2跨域問(wèn)題解決[前端方法]的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
