前端跨域的原因以及解決方案(vue),一文讓你真正理解跨域

跨域這個問題,可以說是前端的必需了解的,但是多少人是知其然不知所以然呢? 下面我們來梳理一下vue解決跨域的思路。

什么情況會跨域?

? 跨域的本質就是瀏覽器基于同源策略的一種安全手段。所謂同源就是必須有以下三個相同點:協議相同、域名相同、端口相同。如果其中有一項不同,即出現非同源請求,就會產生跨域。

? 跨域實際上是瀏覽器的限制,開發中使用 postman請求接口能夠獲得數據就印證了跨域是瀏覽器的限制這個問題。

那瀏覽器為什么要弄個跨域出來?

總的來說:瀏覽器跨域機制的主要目的是保護用戶的安全和隱私.

為什么說跨域能保護用戶的隱私呢 ?? 比如說你打開了某個銀行的官網 xxyh.com,然后又打開了一個惡意網站 xxxx.com,此時兩個網站的域名肯定是不同的,這時候這個惡意的網站想從你銀行網站中獲取你的cookie等個人信息,那么瀏覽器就會阻止它的請求.??

我們開發過程中為什么會出現跨域?

剛才說了,協議、端口、域名,只要有一個不同,請求就會跨域。而我們開發中,項目運行在http://localhost:3000 上,這時候協議是?http,端口是?3000,域名是?localhost。而我們的請求一般是發到了后端給的服務器API地址,這時候協議端口域名出現不同了就會跨域 !

解決方法

? 一般前端中解決跨域問題的方法有 JSONP,CROS,Proxy等,這里我們主要講解一下在 vue中常用的 CORS方法:

一般來說,我們會在vue.config.js中配置proxy反向代理來解決跨域,但是解決的邏輯是怎樣的呢?

拿我的項目來舉例:首先,我們要知道proxy中代碼的作用:

 // 接口轉發proxy: {'/dev': {target: APIURl, // 后端服務器的地址changeOrigin: true, // 設置為 true,允許跨域pathRewrite: {'^/dev': '' // 可選的,重寫請求路徑,如果后端接口的路徑中有特定的前綴,可以進行替換}}}

'/dev',這里指定了一個路徑匹配規則,當前端發起的請求路徑以'/dev'開頭的時候會觸發反向代理配置.

所以想要發起的請求走反向代理,就需要我們的請求是以'/dev'開頭,但是我們封裝的api的路徑里面好像并沒有開頭寫上'/dev',而且如果每個api都需要帶上'/dev'的話,那需要在封裝axios請求的時候每次在路徑前面加上'/dev'也太麻煩了吧.

于是,我們可以在請求攔截器中設置請求的基地址為'/dev',然后每次請求都自動在請求路徑前面帶上了'/dev',就完成了每次請求都走反向代理這個需求.

請求攔截器? request:? ??

?我的基地址是配置在環境變量中的,他在環境變量中是:

?也就等價于:

const service = axios.create({baseURL:'/dev', // url = base url + request urlwithCredentials: false, // send cookies when cross-domain requeststimeout: define.timeout, // request timeout
})

這樣,我們就給每個請求路徑前面都加上了'/dev',然后在vue.config.js中,proxy發現我們的請求是'/dev'開頭的,就會將我們的請求代理到:

 target: APIURl, // 填你后端服務器的地址

并且設置:

changeOrigin: true, // 設置為 true,允許跨域

然后這個配置的作用:

 pathRewrite: {'^/dev': '' // 可選的,重寫請求路徑,如果后端接口的路徑中有特定的前綴,可以進行替換}

因為我們前面說了,'/dev'這個字符串的作用只是一個標識,我們給每個請求的開頭都加上這個標識,就能夠被反向代理識別到然后就能允許跨域 , 而后端給我的實際請求路徑中是沒有'/dev'的,所以,我們在他進入反向代理后,又要將他重寫為 ' ', 讓他不影響真正的請求路徑.?

舉個例子:反向代理就像一個保安,每天都有很多人要從代理過去,但是保安怎么分辨出哪些請求是要讓他通過的呢? 這時候領導和保安說,你看到那些人手里拿著員工牌牌(‘/dev’)的就讓他通過,而我們在請求攔截器中給每個請求前加上了'/dev' ,所以我們的請求就都能代理到真實請求的服務器上去啦 !

然后,既然跨域是瀏覽器的保護機制,那么我們是不是可以將自己瀏覽器的保護機制關了,讓我們在開發中可以直接發起跨域請求呢??

可以!? 看我的這篇文章 :

谷歌關閉跨域限制.(生成一個開發瀏覽器),Chrome關閉跨域

希望對你有用!? !? !

有用的話別忘了點贊哦 ! ! !

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/39625.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/39625.shtml
英文地址,請注明出處:http://en.pswp.cn/news/39625.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

WinCC V7.5 中的C腳本對話框不可見,將編輯窗口移動到可見區域的具體方法

WinCC V7.5 中的C腳本對話框不可見,將編輯窗口移動到可見區域的具體方法 由于 Windows 系統更新或使用不同的顯示器,在配置C動作時,有可能會出現C腳本編輯窗口被移動到不可見區域的現象。 由于該窗口無法被關閉,故無法進行進一步…

KafkaStream:Springboot中集成

1、在kafka-demo中創建配置類 配置kafka參數 package com.heima.kafkademo.config;import lombok.Data; import org.apache.kafka.common.serialization.Serdes; import org.apache.kafka.streams.StreamsConfig; import org.springframework.boot.context.properties.Configu…

8月11日上課內容 nginx的多實例和動靜分離

多實例部署 在一臺服務器上有多個tomcat的服務。 配置多實例之前,看單個實例是否訪問正常。 1.安裝好 jdk 2.安裝 tomcat cd /opt tar zxvf apache-tomcat-9.0.16.tar.gz mkdir /usr/local/tomcat mv apache-tomcat-9.0.16 /usr/local/tomcat/tomcat1 cp -a /u…

Linux系統管理:虛擬機ESXi安裝

目錄 一、理論 1.VMware Workstation 2.VMware vSphere Client 3.ESXi 二、實驗 1.ESXi 7安裝 一、理論 1.VMware Workstation 它是一款專業的虛擬機軟件,可以在一臺物理機上運行多個操作系統,支持Windows、Linux等操作系統,可以模擬…

使用selenium如何實現自動登錄

回顧使用requests如何實現自動登錄一文中,提到好多網站在我們登錄過后,在之后的某段時間內訪問該網頁時,不會給出請登錄的提示,時間到期后就會提示請登錄!這樣在使用爬蟲訪問網頁時還要登錄,打亂我們的節奏…

item_get_sales-獲取商品銷量詳情

一、接口參數說明: item_get_sales-獲取商品銷量詳情,點擊更多API調試,請移步注冊API賬號點擊獲取測試key和secret 公共參數 請求地址: https://api-gw.onebound.cn/taobao/item_get_sales 名稱類型必須描述keyString是調用key&#xff08…

ACM模式刷Leetcode題目

139題單詞拆分 鏈接: link #include<iostream> #include<sstream> #include<string> #include<vector> #include<algorithm> #include<unordered_set> using namespace std;int main() {// 實現輸入第一行為s字符串。// 第二行為wordDic…

【代碼隨想錄day22】爬樓梯

題目 假設你正在爬樓梯。需要 n 階你才能到達樓頂。 每次你可以爬 1 或 2 個臺階。你有多少種不同的方法可以爬到樓頂呢&#xff1f; 示例 1&#xff1a; 輸入&#xff1a;n 2 輸出&#xff1a;2 解釋&#xff1a;有兩種方法可以爬到樓頂。 1. 1 階 1 階 2. 2 階 示例 2…

Spring的三種異常處理方式

1.SpringMVC 異常的處理流程 異常分為編譯時異常和運行時異常&#xff0c;編譯時異常我們 try-cache 進行捕獲&#xff0c;捕獲后自行處理&#xff0c;而運行時異常是不 可預期的&#xff0c;就需要規范編碼來避免&#xff0c;在SpringMVC 中&#xff0c;不管是編譯異常還是運行…

java:JDBC

文章目錄 什么是JDBCJDBC使用步驟詳解各個對象DriverManagerConnectionStatementResultSetPreparedStatement JDBC控制事務操作步驟示例 什么是JDBC 我們知道&#xff0c;數據庫有很多種&#xff0c;比如 mysql&#xff0c;Oracle&#xff0c;DB2等等&#xff0c;如果每一種數…

C# WPF 中 外部圖標引入iconfont,無法正常顯示問題 【小白記錄】

wpf iconfont 外部圖標引入&#xff0c;無法正常顯示問題。 1. 檢查資源路徑和引入格式是否正確2. 檢查資源是否包含在程序集中 1. 檢查資源路徑和引入格式是否正確 正確的格式&#xff0c;注意字體文件 “xxxx.ttf” 應寫為 “#xxxx” <TextBlock Text"&#xe7ae;…

不重啟Docker能添加自簽SSL證書鏡像倉庫嗎?

應用背景 在企業應用Docker規劃初期配置非安全鏡像倉庫時&#xff0c;有時會遺漏一些倉庫沒配置&#xff0c;但此時應用程序已經在Docker平臺上部署起來了&#xff0c;體量越大就越不會讓人去直接重啟Docker。 那么&#xff0c;不重啟Docker能添加自簽SSL證書鏡像倉庫嗎&…

經典人體模型SMPL介紹(一)

SMPL是馬普所提出的經典人體模型&#xff0c;目前已成為姿態估計、人體重建等領域必不可少的基礎先驗。SMPL基于蒙皮和BlendShape實現&#xff0c;從數千個三維人體掃描結果得來&#xff0c;后通過PCA統計學習得來。 論文&#xff1a;SMPL: A Skinned Multi-Person Linear Mode…

Python讀取svn版本

本文將詳細介紹如何使用Python讀取svn版本。 一、安裝svn庫 首先&#xff0c;我們需要使用Python來連接svn服務器&#xff0c;并獲取版本號。這里我們使用pysvn庫來完成這個工作。 pip install pysvn需要注意的是&#xff0c;如果你需要安裝特定版本的pysvn&#xff0c;你可…

2023連鎖收銀系統該如何選?值得推薦的5款連鎖收銀系統

現在不管是連鎖店還是零售店&#xff0c;只要是開店做生意賺錢的&#xff0c;都少不了要和錢打交道&#xff0c;尤其是對連鎖店來說&#xff0c;收銀工作更是重中之重。 連鎖店涉及的門店較多&#xff0c;必須要有一套足夠優秀的連鎖收銀系統&#xff0c;才能做好每個門店的收銀…

【ARM 嵌入式 編譯系列 5 -- GCC 內建函數 __builtin 詳細介紹】

文章目錄 什么是GCC內建函數?GCC 常見內建函數GCC內建函數使用示例上篇文章:ARM 嵌入式 編譯系列 4.2 – GCC 鏈接規范 extern “C“ 介紹 下篇文章:ARM 嵌入式 編譯系列 6 – GCC objcopy, objdump, readelf, nm 介紹 什么是GCC內建函數? GCC提供了一些專門的功能,用于…

使用 `tailwindcss-patch@2` 來提取你的類名吧

使用 tailwindcss-patch2 來提取你的類名吧 使用 tailwindcss-patch2 來提取你的類名吧 安裝使用方式 命令行 Cli 開始提取吧 Nodejs API 的方式來使用 配置 初始化 What’s next? tailwindcss-patch 是一個 tailwindcss 生態的擴展項目。也是 tailwindcss-mangle 項目重要…

redis的Key的過期策略是如何實現的?

Key的過期策略 一個redis中可能同時存在很多很多key&#xff0c;這些key可能有很大一部分都有過期時間&#xff0c;此時&#xff0c;redis服務器咋知道哪些key已經過期要被刪除&#xff0c;哪些key還沒有過期&#xff1f; 如果直接遍歷所有的key&#xff0c;顯然是行不通的&am…

Abandon_Ubuntu Declaration

鑒于以下幾個原因&#xff0c;持續到明年考研結束&#xff0c;我將不再搗鼓ubuntu和任何linux系統&#xff0c; 原因如下&#xff1a; ubuntu23.04不支持wps編輯pdf這個核心功能&#xff0c;且開機向canonial公司發送遠程遙測&#xff0c;暫時不會用iptables禁用&#xff0c;故…

第幾天(day)

廬陽區2021年信息學競賽試題 題目描述 Description 給定一個日期&#xff0c;求這一天是當年的第幾天。每年的元旦&#xff0c;1月1日&#xff0c;都是每年的第一天&#xff0c;但是每年的最后一天&#xff0c;12月31日&#xff0c;有可能是第365天&#xff0c;也有可能是第3…