欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決

 更新時間:2023年01月19日 09:40:00   作者:笛子兔  
在前端發(fā)出Ajax請求的時候,有時候會產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost的解決辦法,需要的朋友可以參考下

前言

前兩天遇到了跨域問題,報了Access to XMLHttpRequest at‘httplocalhost的錯,在網(wǎng)上找了一些資料,我是通過配置vue.config.js、proxy實(shí)現(xiàn)的,感覺非常方便,分享給大家!

一、背景補(bǔ)充(jsonp)

首先,來個背景,為什么會出現(xiàn)跨域?--(先了解一下另一種jsonp,我用的不是這種方法,但怎么說呢,比如面試,多了解幾種方法總是好的,jsonp就不貼具體方法了,因?yàn)槲疫@次沒試)

因?yàn)闉g覽器有同源策略(補(bǔ)充:協(xié)議、域名、端口相同是同源,

同源策略限制:

1、js腳本不能訪問另一個域下的cookie、localstorage

2、不能操作另一個域dom

3、ajax不能跨域請求

也就是限制不同源的資源交互,不能跨域訪問,但是在一個頁面中引入不同域的js卻可以自由訪問,例如img這個標(biāo)簽,基于這個原理jsonp出現(xiàn)。

jsonp和json沒關(guān)系,json是數(shù)據(jù)交換格式,jsonp是非官方數(shù)據(jù)傳輸協(xié)議。

怎么實(shí)現(xiàn),前端傳callback參數(shù),后端用這個參數(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ù)器(啟動vue項(xiàng)目的服務(wù),loclahost:8080),
//再由本地的服務(wù)器去請求真正的服務(wù)器。
module.exports = {
  devServer:{
    proxy:{
      '/api':{//表示攔截以/api開頭的請求路徑
        target:'http://(這里填你項(xiàng)目真實(shí)的后端地址)',
        changOrigin: true,//是否開啟跨域
        pathRewrite:{
          '^/api':'' //重寫api,把a(bǔ)pi變成空字符,因?yàn)槲覀冋嬲埱蟮穆窂绞菦]有api的
        }
      }
    }
  }
}

也就是把vue.config.js配置成上圖所示。

2、在axios.create的時候?qū)aseURL設(shè)置為api ,簡單兩步,就完成啦。

http.js(封裝axios的那個文件)
 
import axios from 'axios'
var http=axios.create({
    baseURL:'api',//把原來的項(xiàng)目地址,改成api,解決跨域問題
    timeout:3000
})

我就是通過以上這兩步,解決了我的跨域問題,希望給大家參考。

再補(bǔ)充一下原理:

1、為什么要重寫api變?yōu)榭兆址?/strong>

因?yàn)槿绻裎覀兡菢优渲煤煤?,我們請求的?shí)際路徑會帶上api,但我們發(fā)起請求的時候是不需要api的,所以要把他變成空字符。

2、在vue中使用proxy進(jìn)行跨域的原理是:

將域名發(fā)送給本地的服務(wù)器(啟動vue項(xiàng)目的服務(wù),loclahost:8080),再由本地的服務(wù)器去請求真正的服務(wù)器。

總結(jié)

到此這篇關(guān)于vue跨域問題:Access to XMLHttpRequest at‘httplocalhost解決的文章就介紹到這了,更多相關(guān)vue跨域問題解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 淺談vue-cli5關(guān)于yarn的一個小坑

    淺談vue-cli5關(guān)于yarn的一個小坑

    本文主要介紹了vue-cli5關(guān)于yarn的一個小坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • Vue computed計(jì)算屬性詳細(xì)講解

    Vue computed計(jì)算屬性詳細(xì)講解

    computed是vue的配置選項(xiàng),它的值是一個對象,其中可定義多個計(jì)算屬性,每個計(jì)算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下
    2022-10-10
  • 詳解element上傳組件before-remove鉤子問題解決

    詳解element上傳組件before-remove鉤子問題解決

    這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue.js 表格分頁ajax 異步加載數(shù)據(jù)

    vue.js 表格分頁ajax 異步加載數(shù)據(jù)

    Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng).這篇文章主要介紹了vue.js 表格分頁ajax 異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • Vue 實(shí)現(xiàn)手動刷新組件的方法

    Vue 實(shí)現(xiàn)手動刷新組件的方法

    這篇文章主要介紹了Vue 實(shí)現(xiàn)手動刷新組件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例

    vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例

    本文主要介紹了vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • Vue組件之事件總線和消息發(fā)布訂閱詳解

    Vue組件之事件總線和消息發(fā)布訂閱詳解

    這篇文章主要為大家詳細(xì)介紹了Vue組件之事件總線和消息發(fā)布訂閱,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • vue結(jié)合element-ui使用示例

    vue結(jié)合element-ui使用示例

    這一篇主要是創(chuàng)建一個vue項(xiàng)目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • Vue動態(tài)設(shè)置el-table操作列的寬度自適應(yīng)

    Vue動態(tài)設(shè)置el-table操作列的寬度自適應(yīng)

    這篇文章主要給大家介紹了關(guān)于Vue如何動態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認(rèn)情況下會平均分配給剩余的列,需要的朋友可以參考下
    2023-07-07
  • 使用axios請求接口,幾種content-type的區(qū)別詳解

    使用axios請求接口,幾種content-type的區(qū)別詳解

    今天小編就為大家分享一篇使用axios請求接口,幾種content-type的區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10

最新評論