老鐵們，大家好，相信還有很多朋友對(duì)于vue使用axios解決跨域和vue中axios和ajax區(qū)別的相關(guān)問(wèn)題不太懂，沒(méi)關(guān)系，今天就由我來(lái)為大家分享分享vue使用axios解決跨域以及vue中axios和ajax區(qū)別的問(wèn)題，文章篇幅可能偏長(zhǎng)，希望可以幫助到大家，下面一起來(lái)看看吧！

前后端分離項(xiàng)目，如何解決跨域問(wèn)題

前后端分離項(xiàng)目跨域問(wèn)題是不可避免的。通常情況下前端由React、Vue等框架編寫，通過(guò)ajax請(qǐng)求服務(wù)端API，傳輸數(shù)據(jù)用json格式。

那么為什么有跨域的問(wèn)題呢？解決跨域問(wèn)題有哪些方式？搞清楚這兩個(gè)問(wèn)題我們需要了解一下什么是同源策略。

瀏覽器的同源策略

同源策略（Sameoriginpolicy）是一種安全約定，是所有主流瀏覽器最核心也是最基本的安全功能之一。同源策略規(guī)定：不同域的客戶端腳本在沒(méi)有明確授權(quán)的情況下，不能請(qǐng)求對(duì)方的資源。同源指的是：域名、協(xié)議、端口均相同。

比如我們?cè)L問(wèn)一個(gè)網(wǎng)站

http://www.test.com/index.html,

那么這個(gè)頁(yè)面請(qǐng)求如下地址得情況是這樣的：

另外，同源策略又分如下兩種情況：

DOM同源策略：禁止對(duì)不同源的頁(yè)面DOM進(jìn)行操作，主要防止iframe的情況。比如iframe標(biāo)簽里放一個(gè)支付寶付款的頁(yè)面，如果沒(méi)有同源策略，那么釣魚網(wǎng)站除了域名不同，其他的則可以和支付寶的網(wǎng)站一模一樣。

XMLHttpRequest同源策略：禁止使用XHR對(duì)象向不同源的服務(wù)器發(fā)起http請(qǐng)求。比如網(wǎng)站記錄了銀行的cookie，這個(gè)時(shí)候你訪問(wèn)了惡意網(wǎng)站，黑客拿到你的cookie，再通過(guò)ajax請(qǐng)求之前的銀行網(wǎng)站，便可以輕易的拿到你的銀行信息。

所以，正是因?yàn)橛辛送床呗?，大家的網(wǎng)絡(luò)環(huán)境才相對(duì)的安全一些。

跨域問(wèn)題的解決辦法

了解了同源策略，就知道為什么會(huì)有跨域問(wèn)題的產(chǎn)生了，都是為了安全。但是實(shí)際研發(fā)中，大家還是需要跨域去訪問(wèn)資源。典型的應(yīng)用場(chǎng)景就是前后端分離的項(xiàng)目了。那么我們?nèi)绾稳ソ鉀Q跨域問(wèn)題呢？

CORS-跨域資源共享

CORS是一種W3C標(biāo)準(zhǔn)，定義了當(dāng)產(chǎn)生跨域問(wèn)題的時(shí)候，客戶端與服務(wù)端如何通信解決跨域問(wèn)題。實(shí)際上就是前后端約定好定義一些自定義的http請(qǐng)求頭，讓客戶端發(fā)起請(qǐng)求的時(shí)候能夠讓服務(wù)端識(shí)別出來(lái)該請(qǐng)求是過(guò)還是不過(guò)。

瀏覽器將CORS請(qǐng)求分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求：

簡(jiǎn)單請(qǐng)求

簡(jiǎn)單請(qǐng)求必須滿足以下兩個(gè)條件：

請(qǐng)求方式必須是HEAD、GET、POST三種方法之一。

Http請(qǐng)求頭必須只能是：Accept、Accept-Lanuage、Content-Lanuage、Last-Event-ID、Content-Type，其中Content-Type只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain。

非簡(jiǎn)單請(qǐng)求

不滿足簡(jiǎn)單請(qǐng)求條件的就是非簡(jiǎn)單請(qǐng)求。針對(duì)非簡(jiǎn)單請(qǐng)求，瀏覽器會(huì)發(fā)起預(yù)檢請(qǐng)求。預(yù)檢請(qǐng)求的意思是當(dāng)瀏覽器檢查到你的頁(yè)面含有跨域請(qǐng)求的時(shí)候，會(huì)發(fā)送一個(gè)OPTIONS請(qǐng)求給對(duì)應(yīng)的服務(wù)器，以檢測(cè)服務(wù)器是否允許當(dāng)前域名的跨域請(qǐng)求。如果服務(wù)端允許該域名請(qǐng)求，則返回204或200狀態(tài)碼，瀏覽器接收到允許請(qǐng)求時(shí)候再繼續(xù)發(fā)送對(duì)應(yīng)的GET/POST/PUT/DELETE請(qǐng)求。同時(shí)服務(wù)器端也會(huì)告知瀏覽器預(yù)檢請(qǐng)求的緩存時(shí)長(zhǎng)是多少，在這個(gè)時(shí)間范圍內(nèi)，瀏覽器不會(huì)再次發(fā)起預(yù)檢請(qǐng)求。

原理基本上就是上面說(shuō)的這些，實(shí)際業(yè)務(wù)中我們?nèi)绾瓮ㄟ^(guò)配置來(lái)解決跨域問(wèn)題呢？基本上常見的就是三種方式：

nginx配置

通常我們?cè)趎ginx增加如下配置即可解決跨域問(wèn)題：

用nginx這種方式是最舒服的，不需要客戶端和服務(wù)端多做其他工作，對(duì)代碼無(wú)入侵。

jsonp

因?yàn)閟cript標(biāo)簽是不受瀏覽器同源策略的影響，允許跨域請(qǐng)求資源（我們的每一個(gè)頁(yè)面都引用了大量第三方j(luò)s文件）。所以可以利用動(dòng)態(tài)創(chuàng)建script標(biāo)簽，通過(guò)src屬性發(fā)起跨域請(qǐng)求，這就是jsonp的原理。但是jsonp只支持GET請(qǐng)求，所以并不是一種好的方式。

服務(wù)端代碼控制

可以在服務(wù)端增加對(duì)跨域請(qǐng)求的支持：

這種方式相當(dāng)于全局過(guò)濾器，對(duì)所有請(qǐng)求都過(guò)濾一遍。

以上三種方式都可以一定程度上解決跨域問(wèn)題，但是nginx配置和服務(wù)端控制不能同時(shí)存在，否則會(huì)報(bào)“Access-Control-Allow-OriginNotAllowMultiplevalue”的錯(cuò)誤。個(gè)人比較推薦nginx配置的方式，一勞永逸，不需要每個(gè)web項(xiàng)目都去編寫跨域的代碼。

大家在工作中有沒(méi)有遇到過(guò)跨域問(wèn)題呢？都是怎么解決的？歡迎評(píng)論區(qū)交流討論，共同學(xué)習(xí)~

Java培訓(xùn)有什么好的學(xué)習(xí)建議么

2019年IT互聯(lián)網(wǎng)發(fā)展的依然非常迅速，而web前端這塊很火，目前工資水平相對(duì)較高，在市場(chǎng)上也是人才比較稀缺，現(xiàn)在各個(gè)行業(yè)轉(zhuǎn)行參加web前端培訓(xùn)學(xué)習(xí)的很多，今天給大家一些建議，希望新手在參加web前端培訓(xùn)或者是自學(xué)的過(guò)程中少走點(diǎn)彎路！

第一點(diǎn)：要有一個(gè)比較適合自己系統(tǒng)的學(xué)習(xí)方案，系統(tǒng)的學(xué)習(xí)教程，很多人在開始學(xué)習(xí)web前端的時(shí)候都不知道如何規(guī)劃，也不知道web前端應(yīng)該學(xué)什么內(nèi)容。參加web前端培訓(xùn)班學(xué)了一遍之后才是真正的入門，然后就是不斷的練習(xí)，不斷的鞏固，為之后的工作打下堅(jiān)實(shí)的基礎(chǔ)。

第二點(diǎn)：我看很多新手剛學(xué)web前端就看各種書籍，作為web前端的老人可以負(fù)責(zé)的告訴你，新手學(xué)習(xí)web前端我不能說(shuō)看書沒(méi)用，但是從作用和效率來(lái)講，這是沒(méi)多大用處的，所以當(dāng)建議一你完成之后，你在拿著書籍去看，這個(gè)適合看書過(guò)給你帶來(lái)非常的大幫助，這叫查缺補(bǔ)漏，你不看一頁(yè)一頁(yè)的看。這才是真正的提升。

建議三;當(dāng)你真正web前端培訓(xùn)學(xué)習(xí)之后，你要看一些博客的文章，技術(shù)類的的，但是你沒(méi)有學(xué)過(guò)一遍web前端之后就別看了，一樣沒(méi)有什么用，最基本的概念都沒(méi)有。而且最好不要自學(xué)選擇一個(gè)專業(yè)的前端培訓(xùn)班學(xué)習(xí)，現(xiàn)在要求非常高。都靠自己自學(xué)很難達(dá)到就業(yè)的水平。

學(xué)習(xí)web前端的四個(gè)階段：

一部分：

html+div+css+ps切圖+ftp網(wǎng)站上傳（網(wǎng)站上線）阿里圖標(biāo)+html5標(biāo)簽+css3動(dòng)畫+手機(jī)網(wǎng)站開發(fā)+swiper.js+iscroll.js

二部分：

JavaScript+jQuery+Ajax+正則表達(dá)式+面向?qū)ο?js插件+代碼性能優(yōu)化+github+sea.js+require.js+gulp

三部分：

2D+3D應(yīng)用+移動(dòng)觸屏事件touch+Canvas+Svg+多媒體技術(shù)+地理信息+本地存儲(chǔ)+H5拖拽api+跨域操作+多線程+highcharts圖表+bootstrap

四部分：

框架vue/react/Angular

前端學(xué)習(xí)的四個(gè)階段一般是前端培訓(xùn)機(jī)構(gòu)學(xué)習(xí)的四個(gè)階段，除了這些一般還會(huì)有項(xiàng)目實(shí)操，但是對(duì)于自學(xué)的來(lái)說(shuō)，基本沒(méi)有什么階段，這個(gè)就需要自己做一個(gè)好的學(xué)習(xí)計(jì)劃了，找一些好的質(zhì)量的學(xué)習(xí)資料，那么尚硅谷前端培訓(xùn)不僅有線下面授班同時(shí)還免費(fèi)分享有前端學(xué)習(xí)視頻供自學(xué)人員下載學(xué)習(xí)。

vue proxytable只能在開發(fā)環(huán)境跨域嗎

跨域問(wèn)題來(lái)源于JavaScript的同源策略，即只有協(xié)議+主機(jī)名+端口號(hào)(如存在)相同，則允許相互訪問(wèn)。也就是說(shuō)JavaScript只能訪問(wèn)和操作自己域下的資源，不能訪問(wèn)和操作其他域下的資源。

多種WEB技術(shù)如何整合使用

近幾年web技術(shù)井噴式的發(fā)展，具體用什么技術(shù)棧還得看公司的具體業(yè)務(wù)，不過(guò)在國(guó)內(nèi)一般的公司都用vue全家桶比較多一些，活躍度也蠻高的，一些有實(shí)力的大廠比如我所在的網(wǎng)易都是自己有自己的框架，這樣對(duì)于整個(gè)框架的掌控力更加到位，但是這一般都是一些具有實(shí)力的大廠才回的，一般而言比較活躍的vue,react,angular.就可以解決一般公司的業(yè)務(wù)需求了。

vue搭配什么做前端開發(fā)比較好

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

1、如果你是在做pc端的應(yīng)用，最好的選擇是ElementUI。

npmielement-ui-S

最簡(jiǎn)單的UI寫法：http://element-cn.eleme.io/#/zh-CN/component/installation

2、APPmobile應(yīng)用的話，最好選擇AUI或ionIc

文檔：http://www.auicss.com/doc/v/2/doc_id/1

AUI2.0是一套全新的AUI框架，在1.X基礎(chǔ)上進(jìn)行了重新架構(gòu)。在2.0中，全局使用rem控制尺寸，完美適應(yīng)不同分辨率移動(dòng)設(shè)備；新加入的主題樣式表方便開發(fā)者自定義基礎(chǔ)顏色樣式，完成APP主題的定制。完美兼容IOS5.1+到Android4.2+。因此我認(rèn)為他是一款不錯(cuò)的UI插件。

文章到此結(jié)束，如果本次分享的vue使用axios解決跨域和vue中axios和ajax區(qū)別的問(wèn)題解決了您的問(wèn)題，那么我們由衷的感到高興！