Vue解決跨域問(wèn)題常見(jiàn)方法詳解
跨域報(bào)錯(cuò)是前端開(kāi)發(fā)中非常經(jīng)典的一個(gè)錯(cuò)誤，報(bào)錯(cuò)如下
Access to XMLHttpRequest at '......' from origin
'......' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域錯(cuò)誤源自于瀏覽器的同源策略，想要解決跨域首先要知道什么是同源策略？
一、同源策略？
同源策略：著名的安全策略，URL有三個(gè)基本組成部分：協(xié)議+域名或ip+端口，三個(gè)必須完全相同稱之為同源，不同源的稱之為跨域
URL 與 URL 對(duì)比:
http://localhost:3000/
https://localhost:3000/ 不同源：協(xié)議不同
http://localhost:3000/
http://127.0.0.1:3000/ 不同源：域名或ip不同
http://localhost:3000/
http://localhost:3001/ 不同源：端口不同
http://localhost:3000/
http://localhost:3000/ 同源
http://127.0.0.1:3000/
http://127.0.0.1:3000/ 同源
注意：同源策略不是服務(wù)器行為，而是瀏覽器的行為，服務(wù)器會(huì)正常響應(yīng)請(qǐng)求，但是如果不同源會(huì)被瀏覽器攔截
搭建express服務(wù)器——演示
搭建一個(gè)express服務(wù)器用來(lái)演示跨域報(bào)錯(cuò)
安裝express
?npm i express
在app.js文件中
?let express = require('express')
?let app = express()
??
?app.listen(3000, () => {
? ? ?console.log('服務(wù)器已啟動(dòng)..端口3000.')
?})
??
?app.use(express.static('./views'))
??
?app.get('/getTest', (req, res) => {
? ? ?console.log(req.query)
? ? ?res.send(req.query)
?})在views/index.html文件中
?<!DOCTYPE html>
?<html>
??
?<head>
? ? ?<meta charset="UTF-8">
? ? ?<title>Document</title>
? ? ?<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
? ? ?<script>
? ? ? ? ?function getIpTest() {
? ? ? ? ? ? ?axios({
? ? ? ? ? ? ? ? ?method: "get",
? ? ? ? ? ? ? ? ?url: "http://127.0.0.1:3000/getTest",
? ? ? ? ? ? ? ? ?params: { uid: 123 },
? ? ? ? ? ? ?}).then((res) => {
? ? ? ? ? ? ? ? ?console.log(res.data);
? ? ? ? ? ? ?});
? ? ? ? ?}
? ? ? ? ?function getDnameTest() {
? ? ? ? ? ? ?axios({
? ? ? ? ? ? ? ? ?method: "get",
? ? ? ? ? ? ? ? ?url: "http://localhost:3000/getTest",
? ? ? ? ? ? ? ? ?params: { uid: 123 },
? ? ? ? ? ? ?}).then((res) => {
? ? ? ? ? ? ? ? ?console.log(res.data);
? ? ? ? ? ? ?});
? ? ? ? ?}
? ? ?</script>
?</head>
??
?<body>
? ? ?<button οnclick="getIpTest()">getIpTest</button>
? ? ?<button οnclick="getDnameTest()">getDnameTest</button>
?</body>
??
?</html>打開(kāi)瀏覽器訪問(wèn)http://127.0.0.1:3000/
(1）調(diào)用getIpTest發(fā)送請(qǐng)求不會(huì)報(bào)錯(cuò)，因?yàn)闉g覽器地址欄訪問(wèn)的服務(wù)器是http://127.0.0.1:3000/** ，而方法內(nèi)發(fā)送請(qǐng)求的URL也是http://127.0.0.1:3000/** ，視為同源
(2）調(diào)用getDnameTest發(fā)送請(qǐng)求報(bào)錯(cuò)，因?yàn)闉g覽器地址欄訪問(wèn)的服務(wù)器是http://127.0.0.1:3000/** ，而方法內(nèi)發(fā)送請(qǐng)求的URL也是http://localhost:3000/** ，視為跨域
Access to XMLHttpRequest at 'http://localhost:3000/......' from origin
'http://127.0.0.1:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
打開(kāi)瀏覽器訪問(wèn)http://localhost:3000/
(3）調(diào)用getDnameTest發(fā)送請(qǐng)求不會(huì)報(bào)錯(cuò)，因?yàn)闉g覽器地址欄訪問(wèn)的服務(wù)器是http://localhost:3000/ ，而方法內(nèi)發(fā)送請(qǐng)求的URL也是http://localhost:3000/ ，視為同源
(4）調(diào)用getIpTest發(fā)送請(qǐng)求報(bào)錯(cuò)，因?yàn)闉g覽器地址欄訪問(wèn)的服務(wù)器是http://localhost:3000/ ，而方法內(nèi)發(fā)送請(qǐng)求的URL也是**http://127.0.0.1:3000/** ，視為跨域
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
二、vue如何處理跨域問(wèn)題？
(1）創(chuàng)建vue項(xiàng)目，安裝axios模塊
?vue create app //創(chuàng)建vue ?npm install axios vue-axios //安裝axios
在main.js中
?import axios from 'axios' ?import VueAxios from 'vue-axios' ?Vue.use(VueAxios, axios)
在views/About.vue中
?<template>
? ?<div>
? ? ?<button @click="getTest()">getTest</button>
? ?</div>
?</template>
??
?<script>
?export default {
? ?methods: {
? ? ?getTest() {
? ? ? ?this.axios({
? ? ? ? ?method: "get",
? ? ? ? ?url: "http://127.0.0.1:3000/getTest",
? ? ? ? ?params: { uid: 123 },
? ? ? ?}).then((res) => {
? ? ? ? ?console.log(res.data);
? ? ? ?});
? ? ?},
? ?},
?};
?</script>腳手架項(xiàng)目端口是8080而請(qǐng)求的express服務(wù)器端口是3000，不滿足同源策略，發(fā)送請(qǐng)求報(bào)跨域錯(cuò)誤
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://127.0.0.1:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
(2）解決辦法
1.配置代理服務(wù)器
在vue.config.js文件中
(修改后需要重啟腳手架項(xiàng)目）
?const { defineConfig } = require('@vue/cli-service')
?module.exports = defineConfig({
? ?transpileDependencies: true,
? ?devServer: {
? ? ?//配置http-proxy代理方式跨域
? ? ?proxy: {
? ? ? ?// 自定義請(qǐng)求的開(kāi)頭,使用代理方式處理/demo開(kāi)頭的請(qǐng)求,/xxx可以自定義
? ? ? ?"/demo": {
? ? ? ? ?// 往哪個(gè)服務(wù)器發(fā)請(qǐng)求
? ? ? ? ?target: "http://127.0.0.1:3000",
? ? ? ? ?pathRewrite: {
? ? ? ? ? ?// ^代表字符串開(kāi)頭,實(shí)際發(fā)送請(qǐng)求時(shí),會(huì)把請(qǐng)求開(kāi)頭的/demo刪除
? ? ? ? ? ?// 因?yàn)?demo并不是請(qǐng)求的一部分,只是個(gè)代理的標(biāo)識(shí)
? ? ? ? ? ?"^/demo": "",
? ? ? ? ?},
? ? ? ?},
? ? ? ?// 如果有其他網(wǎng)址也需要跨域則繼續(xù)配置
? ? ? ?// "/其他的...": {
? ? ? ?// target: "其他的請(qǐng)求地址",
? ? ? ?// pathRewrite: {
? ? ? ?// "^/其他的...": "",
? ? ? ?// },
? ? ? ?// },
? ? ?},
? ?},
?})在views/About.vue文件中
<template>
? ?<div>
? ? ?<button @click="getTest()">getTest</button>
? ?</div>
?</template>
??
?<script>
?export default {
? ?methods: {
? ? ?getTest() {
? ? ? ?this.axios({
? ? ? ? ?method: "get",
? ? ? ? ?// 在原來(lái)的url上去掉http://127.0.0.1:3000換成/demo
? ? ? ? ?url: "/demo/getTest",
? ? ? ? ?params: { uid: 123 },
? ? ? ?}).then((res) => {
? ? ? ? ?console.log(res.data);
? ? ? ?});
? ? ?},
? ?},
?};
?</script>
原理：
跨域是瀏覽器的安全策略，服務(wù)器和服務(wù)器之間發(fā)送請(qǐng)求沒(méi)有跨域
在啟動(dòng)腳手架的時(shí)候會(huì)啟動(dòng)一個(gè)內(nèi)置web服務(wù)器
請(qǐng)求的時(shí)候?yàn)g覽器實(shí)際并沒(méi)有直接和需要請(qǐng)求的服務(wù)器通信，而是通過(guò)內(nèi)置的web服務(wù)器在中轉(zhuǎn)
注意：
項(xiàng)目上線需要把打包后的文件放在服務(wù)器上運(yùn)行，而不是啟動(dòng)腳手架運(yùn)行，也就沒(méi)有內(nèi)置web服務(wù)器做代理，所以此方式只適用于開(kāi)發(fā)測(cè)試階段
上線時(shí)一般后端解決跨域問(wèn)題
需要使用nginx代理或者服務(wù)器配置cors(每種語(yǔ)言有自己不同的配置方式)
2.express處理跨域
express中處理跨域需要使用cors模塊
?npm i cors
在app.js文件中
?let express = require('express')
?// 引入cors模塊
?var cors = require("cors");
?let app = express()
??
?app.listen(3000, () => {
? ? ?console.log('服務(wù)器已啟動(dòng)...')
?})
??
?// 配置跨域
?app.use(cors({
? ? ?// 允許跨域的服務(wù)器地址,可以寫(xiě)多個(gè)
? ? ?origin: ['http://localhost:8080', 'http://127.0.0.1:8080'],
? ? ?// 使用cookie時(shí)需要設(shè)置為true
? ? ?credentials: true
?}));
??
?app.use(express.static('./views'))
??
?app.get('/getTest', (req, res) => {
? ? ?console.log(req.query)
? ? ?res.send(req.query)
?})- vue解決跨域問(wèn)題的幾種常用方法(CORS)
- vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題解決
- vue項(xiàng)目配置代理如何解決跨域問(wèn)題
- vue跨域問(wèn)題:Access?to?XMLHttpRequest?at‘httplocalhost解決
- vue使用反向代理解決跨域問(wèn)題方案
- 解決Vue前后端跨域問(wèn)題的方式匯總
- vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效
- Vue項(xiàng)目中該如何解決跨域問(wèn)題
- vuecli3打包后出現(xiàn)跨域問(wèn)題,前端配置攔截器無(wú)效的解決
- Vue3設(shè)置Proxy代理解決跨域問(wèn)題
- VUE跨域問(wèn)題Access to XMLHttpRequest at
- 前端vue打包項(xiàng)目,如何解決跨域問(wèn)題
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue組件事件屬性穿透詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue組件更新數(shù)據(jù)v-model不生效的解決
這篇文章主要介紹了Vue組件更新數(shù)據(jù)v-model不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vuex的使用及知識(shí)點(diǎn)筆記，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法
這篇文章主要介紹了使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue element-ui父組件控制子組件的表單校驗(yàn)操作
這篇文章主要介紹了Vue element-ui父組件控制子組件的表單校驗(yàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
在Vue中,組件之間的傳參是構(gòu)建動(dòng)態(tài)和交互性用戶界面的關(guān)鍵,Vue提供了多種方式來(lái)傳遞參數(shù),本文對(duì)這些方式進(jìn)行了詳細(xì)說(shuō)明,并有相關(guān)的代碼供大家參考,需要的朋友可以參考下2025-05-05
這篇文章給大家介紹了vue使用qrcode生成二維碼的方法,在Vue中實(shí)現(xiàn)二維碼生成需要使用第三方庫(kù)來(lái)處理生成二維碼的邏輯,常用的庫(kù)有qrcode和vue-qrcode,所以接下來(lái)小編將給大家介紹vue?qrcode生成二維碼的方法示例,需要的朋友可以參考下2024-01-01
下面小編就為大家分享一篇vue實(shí)現(xiàn)提示保存后退出的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue3父子組件傳值中props使用細(xì)節(jié)淺析
這篇文章主要給大家介紹了關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue使用eventBus遇到數(shù)據(jù)不更新的問(wèn)題及解決
這篇文章主要介紹了vue使用eventBus遇到數(shù)據(jù)不更新的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08