搜尋
首頁web前端js教程vue-cli怎樣做出跨域請求
vue-cli怎樣做出跨域請求May 02, 2018 am 10:28 AM
vue-cli怎樣請求

這次帶給大家vue-cli怎樣做出跨域請求,vue-cli做出跨域請求的注意事項有哪些,下面就是實戰案例,一起來看一下。

前端開發時,請求後台介面經常需要跨網域,vue-cli實作跨網域請求只需要開啟config/index.js,修改如下內容即可。

//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
  dev:{
    proxyTable:{
      '/api':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/api': ''
        }
      }
    }
  }
}

 這時在你想請求介面的url處,輸入/api/look/1 即可實現跨域請求。

這時如果打開F12會發現請求的url是localhost:8080/api/look/1,這其實是虛擬從本地請求數據,這樣就不會有跨域的問題產生了。

一般情況下上面的方法是沒有問題的,如果上面的方法行不通,可以試試這樣寫:

//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
  dev:{
    proxyTable:{
      '/look':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/look': '/look'
        }
      }
    }
  }
}

這時在你想請求接口的url處,輸入/ look/1 即可實現跨域請求。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JS動態操作HTML標記

#使用JS操作input文字方塊內容

以上是vue-cli怎樣做出跨域請求的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Vue 中如何进行跨域请求?Vue 中如何进行跨域请求?Jun 10, 2023 pm 10:30 PM

Vue是一种流行的JavaScript框架,用于构建现代化的Web应用程序。在使用Vue开发应用程序时,常常需要与不同的API交互,而这些API往往位于不同的服务器上。由于跨域安全策略的限制,当Vue应用程序在一个域名上运行时,它不能直接与另一个域名上的API进行通信。本文将介绍几种在Vue中进行跨域请求的方法。1.使用代理一种常见的跨域解决方案是使用代理

Nginx如何实现基于请求URL的请求重写配置Nginx如何实现基于请求URL的请求重写配置Nov 08, 2023 pm 04:15 PM

Nginx是一款轻量、高性能的Web服务器,它不仅支持反向代理、负载均衡等高级功能,还具备强大的请求重写能力。在实际的Web应用中,很多情况下需要对请求URL进行重写,以达到更好的用户体验和搜索引擎优化效果。本文将介绍Nginx如何实现基于请求URL的请求重写配置,包括具体的代码示例。重写语法在Nginx中,可以使用rewrite指令来进行请求重写。其基本语

Laravel中Head请求方法的常见应用场景Laravel中Head请求方法的常见应用场景Mar 06, 2024 pm 09:33 PM

Laravel中Head请求方法的常见应用场景在Laravel中,HTTP请求方法中的HEAD方法通常被用于获取资源的元数据而不获取实际的内容。HEAD请求和GET请求类似,但是不返回实际的响应主体内容,只返回响应头信息。这使得HEAD请求在一些特定的场景下非常有用,以下是一些常见的应用场景和相应的代码示例。验证链接的有效性使用HEAD请求方法可以用于验证链

如何在Go中使用context实现请求重试策略如何在Go中使用context实现请求重试策略Jul 21, 2023 pm 04:39 PM

如何在Go中使用context实现请求重试策略引言:在构建分布式系统中,网络请求不可避免地会遇到一些失败的情况。为了保证系统的可靠性和稳定性,我们通常会使用重试策略来处理这些失败的请求,以增加请求的成功率。在Go语言中,我们可以使用context包来实现请求的重试策略。本文将介绍如何在Go中使用context包来实现请求的重试策略,并附带代码示例。一、什么是

如何在Go中使用context实现请求幂等性如何在Go中使用context实现请求幂等性Jul 21, 2023 pm 12:37 PM

如何在Go中使用context实现请求幂等性介绍在Web开发中,幂等性是一个非常重要的概念。它确保一个请求的多次执行不会对系统产生不一致的副作用。在处理并发请求或者网络不稳定的情况下,使用幂等性可以保证请求的安全性和可靠性。Go语言中的context包提供了一种机制来处理这种情况。什么是幂等性简单来说,幂等性指的是对同一个操作的多次执行所产生的结果与一次执行

Vue 中 Vue-cli 的详细使用方法指南Vue 中 Vue-cli 的详细使用方法指南Jun 26, 2023 am 08:03 AM

Vue是一种流行的前端框架,它的灵活性和易用性受到了许多开发者的青睐。为了更好的开发Vue应用程序,Vue团队开发了一个强大的工具-Vue-cli,使得开发Vue应用程序变得更加容易。本文将为您详细介绍Vue-cli的使用方法。一、安装Vue-cli使用Vue-cli之前,需要先安装它。首先,您需要确保已经安装了Node.js。然后,使用npm安装Vue-c

如何使用Hyperf框架进行请求重试如何使用Hyperf框架进行请求重试Oct 24, 2023 am 09:37 AM

如何使用Hyperf框架进行请求重试随着网络通信的不可预测性,我们在应用开发中常常会遇到请求失败的情况。为了保证应用的稳定性和健壮性,我们可以通过请求重试机制来增加请求的成功率。在Hyperf框架中,我们可以利用Hyperf提供的Retry组件来实现请求重试功能。本文将详细介绍如何在Hyperf框架中使用Retry组件,并给出具体的代码示例。首先,我们需要在

如何在CodeIgniter中使用中间件来处理请求和响应如何在CodeIgniter中使用中间件来处理请求和响应Jul 30, 2023 am 08:57 AM

如何在CodeIgniter中使用中间件来处理请求和响应导言:CodeIgniter是一个轻量级的PHP框架,被广泛应用于开发Web应用程序。随着项目的增长和复杂度的提高,我们常常需要对请求和响应进行预处理或者后处理。为了实现这个目的,我们可以使用中间件来进行统一的请求过滤和响应处理。本文将介绍如何在CodeIgniter中使用中间件。概述中间件的概念和作用

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)