vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決
前言
前兩天遇到了跨域問題，報了Access to XMLHttpRequest at‘httplocalhost的錯，在網(wǎng)上找了一些資料，我是通過配置vue.config.js、proxy實現(xiàn)的，感覺非常方便，分享給大家！
一、背景補充（jsonp）
首先，來個背景，為什么會出現(xiàn)跨域？--（先了解一下另一種jsonp，我用的不是這種方法，但怎么說呢，比如面試，多了解幾種方法總是好的，jsonp就不貼具體方法了，因為我這次沒試）
因為瀏覽器有同源策略（補充：協(xié)議、域名、端口相同是同源，
同源策略限制：
1、js腳本不能訪問另一個域下的cookie、localstorage
2、不能操作另一個域dom
3、ajax不能跨域請求
也就是限制不同源的資源交互，不能跨域訪問，但是在一個頁面中引入不同域的js卻可以自由訪問，例如img這個標簽，基于這個原理jsonp出現(xiàn)。
jsonp和json沒關系，json是數(shù)據(jù)交換格式，jsonp是非官方數(shù)據(jù)傳輸協(xié)議。
怎么實現(xiàn)，前端傳callback參數(shù)，后端用這個參數(shù)的值作為函數(shù)名稱包裹json數(shù)據(jù)，這樣給前端的就是js代碼了。
二、實踐解決跨域方法（基于封裝好的axios，非原生）
1.在vue項目根目錄下找到vue.config.js文件（如果沒有該文件則自己創(chuàng)建），在proxy中設置跨域，在proxy中設置要訪問的地址，并重寫/api為空的字符串。
vue.config.js
// const { defineConfig } = require('@vue/cli-service')
//在vue中使用proxy進行跨域的原理是：
//將域名發(fā)送給本地的服務器（啟動vue項目的服務,loclahost:8080），
//再由本地的服務器去請求真正的服務器。
module.exports = {
devServer:{
proxy:{
'/api':{//表示攔截以/api開頭的請求路徑
target:'http://（這里填你項目真實的后端地址）',
changOrigin: true,//是否開啟跨域
pathRewrite:{
'^/api':'' //重寫api，把api變成空字符，因為我們真正請求的路徑是沒有api的
}
}
}
}
}也就是把vue.config.js配置成上圖所示。
2、在axios.create的時候將baseURL設置為api ，簡單兩步，就完成啦。
http.js（封裝axios的那個文件）
import axios from 'axios'
var http=axios.create({
baseURL:'api',//把原來的項目地址，改成api，解決跨域問題
timeout:3000
})我就是通過以上這兩步，解決了我的跨域問題，希望給大家參考。
再補充一下原理：
1、為什么要重寫api變?yōu)榭兆址?/strong>
因為如果像我們那樣配置好后，我們請求的實際路徑會帶上api，但我們發(fā)起請求的時候是不需要api的，所以要把他變成空字符。
2、在vue中使用proxy進行跨域的原理是：
將域名發(fā)送給本地的服務器（啟動vue項目的服務,loclahost:8080），再由本地的服務器去請求真正的服務器。
總結
到此這篇關于vue跨域問題:Access to XMLHttpRequest at‘httplocalhost解決的文章就介紹到這了,更多相關vue跨域問題解決內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了vue-cli5關于yarn的一個小坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-10-10
詳解element上傳組件before-remove鉤子問題解決
這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue.js 表格分頁ajax 異步加載數(shù)據(jù)
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng).這篇文章主要介紹了vue.js 表格分頁ajax 異步加載數(shù)據(jù)的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了Vue 實現(xiàn)手動刷新組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本文主要介紹了vue路由權限和按鈕權限的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要為大家詳細介紹了Vue組件之事件總線和消息發(fā)布訂閱，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這一篇主要是創(chuàng)建一個vue項目并結合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章主要給大家介紹了關于Vue如何動態(tài)設置el-table操作列的寬度自適應,很多頁面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認情況下會平均分配給剩余的列,需要的朋友可以參考下2023-07-07
使用axios請求接口,幾種content-type的區(qū)別詳解
今天小編就為大家分享一篇使用axios請求接口,幾種content-type的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10