vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決
前言
前兩天遇到了跨域問題，報(bào)了Access to XMLHttpRequest at‘httplocalhost的錯(cuò)，在網(wǎng)上找了一些資料，我是通過配置vue.config.js、proxy實(shí)現(xiàn)的，感覺非常方便，分享給大家！
一、背景補(bǔ)充（jsonp）
首先，來個(gè)背景，為什么會(huì)出現(xiàn)跨域？--（先了解一下另一種jsonp，我用的不是這種方法，但怎么說呢，比如面試，多了解幾種方法總是好的，jsonp就不貼具體方法了，因?yàn)槲疫@次沒試）
因?yàn)闉g覽器有同源策略（補(bǔ)充：協(xié)議、域名、端口相同是同源，
同源策略限制：
1、js腳本不能訪問另一個(gè)域下的cookie、localstorage
2、不能操作另一個(gè)域dom
3、ajax不能跨域請(qǐng)求
也就是限制不同源的資源交互，不能跨域訪問，但是在一個(gè)頁面中引入不同域的js卻可以自由訪問，例如img這個(gè)標(biāo)簽，基于這個(gè)原理jsonp出現(xiàn)。
jsonp和json沒關(guān)系，json是數(shù)據(jù)交換格式，jsonp是非官方數(shù)據(jù)傳輸協(xié)議。
怎么實(shí)現(xiàn)，前端傳callback參數(shù)，后端用這個(gè)參數(shù)的值作為函數(shù)名稱包裹json數(shù)據(jù)，這樣給前端的就是js代碼了。
二、實(shí)踐解決跨域方法（基于封裝好的axios，非原生）
1.在vue項(xiàng)目根目錄下找到vue.config.js文件（如果沒有該文件則自己創(chuàng)建），在proxy中設(shè)置跨域，在proxy中設(shè)置要訪問的地址，并重寫/api為空的字符串。
vue.config.js
// const { defineConfig } = require('@vue/cli-service')
//在vue中使用proxy進(jìn)行跨域的原理是：
//將域名發(fā)送給本地的服務(wù)器（啟動(dòng)vue項(xiàng)目的服務(wù),loclahost:8080），
//再由本地的服務(wù)器去請(qǐng)求真正的服務(wù)器。
module.exports = {
devServer:{
proxy:{
'/api':{//表示攔截以/api開頭的請(qǐng)求路徑
target:'http://（這里填你項(xiàng)目真實(shí)的后端地址）',
changOrigin: true,//是否開啟跨域
pathRewrite:{
'^/api':'' //重寫api，把a(bǔ)pi變成空字符，因?yàn)槲覀冋嬲?qǐng)求的路徑是沒有api的
}
}
}
}
}也就是把vue.config.js配置成上圖所示。
2、在axios.create的時(shí)候?qū)aseURL設(shè)置為api ，簡(jiǎn)單兩步，就完成啦。
http.js（封裝axios的那個(gè)文件）
import axios from 'axios'
var http=axios.create({
baseURL:'api',//把原來的項(xiàng)目地址，改成api，解決跨域問題
timeout:3000
})我就是通過以上這兩步，解決了我的跨域問題，希望給大家參考。
再補(bǔ)充一下原理：
1、為什么要重寫api變?yōu)榭兆址?/strong>
因?yàn)槿绻裎覀兡菢优渲煤煤?，我們?qǐng)求的實(shí)際路徑會(huì)帶上api，但我們發(fā)起請(qǐng)求的時(shí)候是不需要api的，所以要把他變成空字符。
2、在vue中使用proxy進(jìn)行跨域的原理是：
將域名發(fā)送給本地的服務(wù)器（啟動(dòng)vue項(xiàng)目的服務(wù),loclahost:8080），再由本地的服務(wù)器去請(qǐng)求真正的服務(wù)器。
總結(jié)
到此這篇關(guān)于vue跨域問題:Access to XMLHttpRequest at‘httplocalhost解決的文章就介紹到這了,更多相關(guān)vue跨域問題解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解
這篇文章主要介紹了Vue路由鉤子 afterEach beforeEach區(qū)別 ,vue-router作為vue里面最基礎(chǔ)的服務(wù),學(xué)習(xí)一段時(shí)間,對(duì)遇到的需求進(jìn)行一些總結(jié)。需要的朋友可以參考下2018-07-07
詳解Vue 多級(jí)組件透?jìng)餍路椒╬rovide/inject
這篇文章主要介紹了詳解Vue 多級(jí)組件透?jìng)餍路椒╬rovide/inject，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)echarts中的儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue-cli 首屏加載優(yōu)化問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
基于element-ui封裝可搜索的懶加載tree組件的實(shí)現(xiàn)
這篇文章主要介紹了基于element-ui封裝可搜索的懶加載tree組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線翻譯功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
在for循環(huán)中生成的元素要加key屬性不僅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其實(shí)都不是必須的，因?yàn)樵?Vue和React中不加key是不會(huì)報(bào)錯(cuò)的，只是會(huì)有警告。但是我們?cè)谏钊肓私饧觡ey的原因后會(huì)明白，若想確保沒有隱患的話，元素還是必須要加key屬性。2021-05-05
Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼
這篇文章主要介紹了Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼,需要的朋友可以參考下2017-08-08
關(guān)于element ui中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element ui中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09