概念：

什么是跨域？

跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)javascript施加的安全限制。所謂同源是指，域名，協(xié)議，端口均相同。 http://www.123.com/index.html 調(diào)用 http://www.123.com/server.php （非跨域） http://www.123.com/index.html 調(diào)用 http://www.456.com/server.php （主域名不同:123/456，跨域） http://abc.123.com/index.html 調(diào)用 http://def.123.com/server.php （子域名不同:abc/def，跨域） http://www.123.com:8080/index.html 調(diào)用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域） http://www.123.com/index.html 調(diào)用 https://www.123.com/server.php （協(xié)議不同:http/https，跨域） 請(qǐng)注意：localhost和127.0.0.1雖然都指向本機(jī)，但也屬于跨域。 瀏覽器執(zhí)行javascript腳本時(shí)，會(huì)檢查這個(gè)腳本屬于哪個(gè)頁(yè)面，如果不是同源頁(yè)面，就不會(huì)被執(zhí)行。

解決方案：

方法一：使用jsonp

前端代碼：

$.ajax({url : 'XXXXXXX',type : 'get',dataType : 'jsonp',jsonp : 'jsonpCallback', //成功回調(diào),如果不設(shè)置,默認(rèn)返回callback,后端需要返回此方法,比如Java寫(xiě)法如下success : function (data) {console.log(data);},error : function (error) {console.log(error);}})

后端代碼(以Java為例)：

public string ProcessCallback(string name, string email){if (Request.QueryString != null){string jsonpCallback = Request.QueryString["jsonpcallback"];var user = new User{Name = name,Email = email};// jsonpCallback 對(duì)應(yīng)前端的jsonp: 'jsonpCallback'中的jsonpCallback,如果沒(méi)設(shè)置,默認(rèn)callbackreturn jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";}return "error";}
方法二：利用CORS（跨域資源共享）

前端代碼:

服務(wù)器代碼:

服務(wù)器端對(duì)于CORS的支持，主要就是通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置，就可以允許Ajax進(jìn)行跨域的訪問(wèn)。

使用該方式的特點(diǎn)：

與前jsonp方式相比，前端代碼和未處理跨域前一樣，即普通的ajax請(qǐng)求，但服務(wù)器代碼添加了一段解決跨域的代碼

PS:

cors高級(jí)使用：

在springmvc中配置攔截器,創(chuàng)建跨域攔截器實(shí)現(xiàn)HandlerInterceptor接口，并實(shí)現(xiàn)其方法，在請(qǐng)求處理前設(shè)置頭信息，并放行

在springmvc的配置文件中配置攔截器，注意攔截的是所有的文件

例子：

vue項(xiàng)目跨域舉例：

首先需要配置config下的index.js中的proxyTable，配置如下：

dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: './',proxyTable: {'/api': {target: 'http://happymmall.com',// 請(qǐng)換成你需要跨域請(qǐng)求的地址changeOrigin: true,pathRewrite: {'^/api': ''}}}, 解釋： proxyTable中的pathRewrite的/api理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用

'http://hayypmmall.com/product/list.do?keyword=手機(jī)'這個(gè)接口，則換成'/api/procuct/list.do?keyword=手機(jī)'即可。

以下為發(fā)送該請(qǐng)求時(shí)，axios的代碼：代碼中baseURL為'/api'，url為'product/list.do?keyword=手機(jī)',合起來(lái)就是'/api/procuct/list.do?keyword=手機(jī)'，

由于我們?cè)赾onfig中的index.js設(shè)置了代理，則請(qǐng)求地址實(shí)際為'http://hayypmmall.com/product/list.do?keyword=手機(jī)'

axios({method: 'get',baseURL: '/api',url: 'product/list.do?keyword=手機(jī)'}).then(res => {console.log(res.data.data.list[0].name);}).catch(err => {console.log(err);});運(yùn)行結(jié)果為：

此時(shí)網(wǎng)絡(luò)請(qǐng)求中也可看到成功的請(qǐng)求：

然而這只是解決了開(kāi)發(fā)環(huán)境下的跨域，npm run build出來(lái)后的dist代碼，放到服務(wù)器中運(yùn)行，還是會(huì)存在跨域問(wèn)題，比如網(wǎng)上的這位伙伴，問(wèn)題如下，相信大家也是遇到這個(gè)問(wèn)題（開(kāi)發(fā)環(huán)境下的跨域解決了，但是生產(chǎn)環(huán)境中的跨域還是沒(méi)有解決）。

以下為圖片：

以上為圖片

許多有經(jīng)驗(yàn)的伙伴在問(wèn)題下紛紛貢獻(xiàn)上解決辦法，其中一位800多聲望值的伙伴回答如下：

以下為圖片：

以上為圖片。

也就是問(wèn)題又重新回歸到了上邊介紹的跨域方法二：利用CORS

如果上線時(shí)前后端部署到同源下的話，這時(shí)只需要解決開(kāi)發(fā)時(shí)的跨域，部署上線后，由于是同源，不存在跨域問(wèn)題；這種情況下，本人使用的是mac下的charles，一款代理軟件，輕松解決開(kāi)發(fā)環(huán)境下的跨域問(wèn)題；Windows下相同功能的有Fiddler。

總結(jié)

以上是生活随笔為你收集整理的详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。