欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue解決跨域問題常見方法詳解

 更新時(shí)間：2023年06月15日 09:20:22   作者：無信_不立  
這篇文章主要介紹了Vue解決跨域問題常見方法,結(jié)合實(shí)例形式詳細(xì)分析了vue出現(xiàn)跨域問題的原因,以及常見解決方案與相關(guān)注意事項(xiàng),需要的朋友可以參考下

跨域報(bào)錯(cuò)是前端開發(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 對比:

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ù)器會正常響應(yīng)請求，但是如果不同源會被瀏覽器攔截

搭建express服務(wù)器——演示

搭建一個(gè)express服務(wù)器用來演示跨域報(bào)錯(cuò)

安裝express

?npm i express

在app.js文件中

?let express = require('express')
?let app = express()
??
?app.listen(3000, () => {
? ? ?console.log('服務(wù)器已啟動..端口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>

打開瀏覽器訪問http://127.0.0.1:3000/

(1）調(diào)用getIpTest發(fā)送請求不會報(bào)錯(cuò)，因?yàn)闉g覽器地址欄訪問的服務(wù)器是http://127.0.0.1:3000/** ，而方法內(nèi)發(fā)送請求的URL也是http://127.0.0.1:3000/** ，視為同源

(2）調(diào)用getDnameTest發(fā)送請求報(bào)錯(cuò)，因?yàn)闉g覽器地址欄訪問的服務(wù)器是http://127.0.0.1:3000/** ，而方法內(nèi)發(fā)送請求的URL也是http://localhost:3000/** ，視為跨域

6d65a61429a74ae5bbbf00db1690749b.png

 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.

打開瀏覽器訪問http://localhost:3000/

(3）調(diào)用getDnameTest發(fā)送請求不會報(bào)錯(cuò)，因?yàn)闉g覽器地址欄訪問的服務(wù)器是http://localhost:3000/ ，而方法內(nèi)發(fā)送請求的URL也是http://localhost:3000/ ，視為同源

(4）調(diào)用getIpTest發(fā)送請求報(bào)錯(cuò)，因?yàn)闉g覽器地址欄訪問的服務(wù)器是http://localhost:3000/ ，而方法內(nèi)發(fā)送請求的URL也是**http://127.0.0.1:3000/** ，視為跨域

4a89278b647d4132a471101a18f8350b.png

 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如何處理跨域問題？

(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而請求的express服務(wù)器端口是3000，不滿足同源策略，發(fā)送請求報(bào)跨域錯(cuò)誤

811a362f883346ccb87fbe857714600b.png

 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: {
? ? ? ?// 自定義請求的開頭,使用代理方式處理/demo開頭的請求,/xxx可以自定義
? ? ? ?"/demo": {
? ? ? ? ?// 往哪個(gè)服務(wù)器發(fā)請求
? ? ? ? ?target: "http://127.0.0.1:3000",
? ? ? ? ?pathRewrite: {
? ? ? ? ? ?// ^代表字符串開頭,實(shí)際發(fā)送請求時(shí),會把請求開頭的/demo刪除
? ? ? ? ? ?// 因?yàn)?demo并不是請求的一部分,只是個(gè)代理的標(biāo)識
? ? ? ? ? ?"^/demo": "",
? ? ? ? ?},
? ? ? ?},
? ? ? ?// 如果有其他網(wǎng)址也需要跨域則繼續(xù)配置
? ? ? ?// "/其他的...": {
? ? ? ?// target: "其他的請求地址",
? ? ? ?// pathRewrite: {
? ? ? ?// "^/其他的...": "",
? ? ? ?// },
? ? ? ?// },
? ? ?},
? ?},
?})

在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換成/demo
? ? ? ? ?url: "/demo/getTest",
? ? ? ? ?params: { uid: 123 },
? ? ? ?}).then((res) => {
? ? ? ? ?console.log(res.data);
? ? ? ?});
? ? ?},
? ?},
?};
?</script>

22099be2380c4a2985c8141920cd4867.png

原理：

跨域是瀏覽器的安全策略，服務(wù)器和服務(wù)器之間發(fā)送請求沒有跨域

在啟動腳手架的時(shí)候會啟動一個(gè)內(nèi)置web服務(wù)器

請求的時(shí)候?yàn)g覽器實(shí)際并沒有直接和需要請求的服務(wù)器通信，而是通過內(nèi)置的web服務(wù)器在中轉(zhuǎn)

注意：

項(xiàng)目上線需要把打包后的文件放在服務(wù)器上運(yùn)行，而不是啟動腳手架運(yùn)行，也就沒有內(nèi)置web服務(wù)器做代理，所以此方式只適用于開發(fā)測試階段

上線時(shí)一般后端解決跨域問題

需要使用nginx代理或者服務(wù)器配置cors(每種語言有自己不同的配置方式)

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ù)器已啟動...')
?})
??
?// 配置跨域
?app.use(cors({
? ? ?// 允許跨域的服務(wù)器地址,可以寫多個(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)
?})

相關(guān)文章

  • vue中v-model和響應(yīng)式的實(shí)現(xiàn)原理解析

    vue中v-model和響應(yīng)式的實(shí)現(xiàn)原理解析

    這篇文章主要介紹了vue中v-model和響應(yīng)式的實(shí)現(xiàn)原理,通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-03-03
  • vue頁面圖片不顯示問題解決方案

    vue頁面圖片不顯示問題解決方案

    這篇文章主要介紹了vue頁面圖片不顯示問題解決方案,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • 一文帶你上手Vue新的狀態(tài)管理Pinia

    一文帶你上手Vue新的狀態(tài)管理Pinia

    Vuex 作為一個(gè)老牌 Vue 狀態(tài)管理庫，大家都很熟悉了，Pinia 是 Vue.js 團(tuán)隊(duì)成員專門為 Vue 開發(fā)的一個(gè)全新的狀態(tài)管理庫，本文就來講講它的具體使用吧
    2023-04-04
  • vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題

    vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題

    這篇文章主要介紹了vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • vue-extend和vue-component注冊一個(gè)全局組件方式

    vue-extend和vue-component注冊一個(gè)全局組件方式

    這篇文章主要介紹了vue-extend和vue-component注冊一個(gè)全局組件方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue實(shí)現(xiàn)購物車完整功能

    vue實(shí)現(xiàn)購物車完整功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購物車完整功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-01-01
  • 詳解Vue.js中引入圖片路徑的幾種方式

    詳解Vue.js中引入圖片路徑的幾種方式

    這篇文章主要介紹了Vue.js中引入圖片路徑的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • Vue項(xiàng)目中實(shí)現(xiàn)帶參跳轉(zhuǎn)功能

    Vue項(xiàng)目中實(shí)現(xiàn)帶參跳轉(zhuǎn)功能

    最近做了一個(gè)手機(jī)端系統(tǒng)，其中遇到了父頁面需要攜帶參數(shù)跳轉(zhuǎn)至子頁面的問題，現(xiàn)已解決，下面分享一下實(shí)現(xiàn)過程，感興趣的朋友一起看看吧
    2021-04-04
  • vue更多篩選項(xiàng)小組件使用詳解

    vue更多篩選項(xiàng)小組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了vue更多篩選項(xiàng)小組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-06-06
  • vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)

    vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)

    這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法的相關(guān)資料,文中介紹的是后端接口導(dǎo)出、前端直接做導(dǎo)出,通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-05-05

最新評論