一、問(wèn)題描述

在本地開(kāi)發(fā)過(guò)程中，調(diào)用后端提供的接口獲取數(shù)據(jù)將獲取的數(shù)據(jù)渲染到頁(yè)面中，但是瀏覽器報(bào)錯(cuò)：

// 控制臺(tái)報(bào)錯(cuò)信息 Access to XMLHttpRequest at 'http://x.x.x.x/app/v1_0/user/followings' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://x.x.x.x:8080' that is not equal to the supplied origin.

這種情況是由瀏覽器的同源策略導(dǎo)致的跨域問(wèn)題。

跨域問(wèn)題的出現(xiàn)是因?yàn)闉g覽器存在同源策略問(wèn)題，所謂同源:即兩個(gè)頁(yè)面具有相同的協(xié)議（protocol：http、https），主機(jī)（host）和端口（port），它是瀏覽器最核心也是最基本的功能，如果沒(méi)有同源策略，瀏覽器將會(huì)十分危險(xiǎn)，隨時(shí)都可能受到攻擊。當(dāng)我們請(qǐng)求一個(gè)接口獲取數(shù)據(jù)的時(shí)候，出現(xiàn)如：“Access-Control-Allow-Origin” 等報(bào)錯(cuò)信息即說(shuō)明該請(qǐng)求跨域。

二、解決方案

在vue項(xiàng)目根目錄下找到vue.config.js文件（如果沒(méi)有該文件可自己創(chuàng)建），在proxy中設(shè)置跨域。
vue官方參考文檔vue-config-js

在vue項(xiàng)目中配置proxy解決跨域問(wèn)題的原理是：將域名發(fā)送給本地的服務(wù)器（啟動(dòng)vue項(xiàng)目的服務(wù)，localhost:8080），再由本地的服務(wù)器去請(qǐng)求真正的服務(wù)器。

在vue項(xiàng)目中，在創(chuàng)建axios實(shí)例的時(shí)候?qū)aseURL設(shè)置為 /api ，這時(shí)候我們的跨域問(wèn)題便已解決。

重新啟動(dòng)項(xiàng)目便解決了報(bào)錯(cuò)問(wèn)題，此時(shí)我們?cè)跒g覽器查看Network中的請(qǐng)求信息會(huì)看到Request URL是：http://localhost:8080/api/app/v1_0/user/followings，多了個(gè) /api，但并不影響我們請(qǐng)求數(shù)據(jù)。

配置完成后的訪問(wèn)路徑為：

原來(lái)的訪問(wèn)路徑為： http://ttaxxxx.xxx.cn/app/v1_0/user/followings

總結(jié)

以上是生活随笔為你收集整理的Vue项目开发过程中解决跨域问题（vue.config.js结合axios）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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