首页 web前端 js教程 axios实现跨域分别是哪三种方法

axios实现跨域分别是哪三种方法

Aug 20, 2020 pm 01:15 PM
axios 跨域

axios实现跨域的三种方法:1、在【mian.js】中引用axios,代码为【Vue.prototype.$axios = axios】;2、在页面中引用axios,代码为【this.$axios.post('/api/】。

axios实现跨域分别是哪三种方法

axios实现跨域的三种方法:

1. mian.js 引用axios

import axios from 'axios'
 
Vue.prototype.$axios = axios
登录后复制

2.config/index.js 的dev中添加如下代码

proxyTable: {
 
    '/api': {
 
         target: 'http://127.0.0.1/hyhy/',//设置你调用的接口域名和端口号 别忘了加http
 
         changeOrigin: true,
 
         pathRewrite: {
 
              '^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调             用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
 
        }
 
    }
 
}
登录后复制

3.在页面中引用

this.$axios.post('/api/userlogin/login', Qs.stringify({ username: this.username, password: this.password }))
 
.then((response) => {
 
    console.log(response)
 
})
 
.catch((response) => {
 
    console.log(response)
 
})
登录后复制

相关学习推荐:js视频教程

以上是axios实现跨域分别是哪三种方法的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热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.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在Vue应用中使用axios时出现“Uncaught (in promise) Error: Request failed with status code 500”怎么办? 在Vue应用中使用axios时出现“Uncaught (in promise) Error: Request failed with status code 500”怎么办? Jun 24, 2023 pm 05:33 PM

在Vue应用中使用axios是十分常见的,axios是一种基于Promise的HTTP客户端,可以用于浏览器和Node.js。在开发过程中,有时会出现“Uncaught(inpromise)Error:Requestfailedwithstatuscode500”的错误提示,对于开发者来说,这个错误提示可能有些难以理解和解决。本文将会探讨这

在Vue应用中使用axios时出现“TypeError: Failed to fetch”怎么办? 在Vue应用中使用axios时出现“TypeError: Failed to fetch”怎么办? Jun 24, 2023 pm 11:03 PM

最近,在使用Vue应用开发过程中,我遇到了一个常见的问题:“TypeError:Failedtofetch”错误提示。这个问题出现在使用axios进行HTTP请求时,后端服务器没有正确响应请求时发生。这种错误提示通常表明请求无法到达服务器,可能是由于网络原因或服务器未响应造成的。出现这个错误提示后,我们应该怎么办呢?以下是一些解决方法:检查网络连接由于

Vue中数据请求的选择:Axios or Fetch? Vue中数据请求的选择:Axios or Fetch? Jul 17, 2023 pm 06:30 PM

Vue中数据请求的选择:AxiosorFetch?在Vue开发中,处理数据请求是一个非常常见的任务。而选择使用哪种工具来进行数据请求,则是一个需要考虑的问题。在Vue中,最常见的两种工具是Axios和Fetch。本文将会比较这两种工具的优缺点,并给出一些示例代码来帮助你做出选择。Axios是一个基于Promise的HTTP客户端,可以在浏览器和Node.

在Vue应用中使用axios时出现“Error: Network Error”怎么解决? 在Vue应用中使用axios时出现“Error: Network Error”怎么解决? Jun 25, 2023 am 08:27 AM

在Vue应用中使用axios时出现“Error:NetworkError”怎么解决?在Vue应用的开发中,我们经常会使用到axios进行API的请求或数据的获取,但是有时我们会遇到axios请求出现“Error:NetworkError”的情况,这时我们该怎么办呢?首先,需要了解“Error:NetworkError”是什么意思,它通常表示网络连

高效利用Vue和Axios实现前端数据的批量处理 高效利用Vue和Axios实现前端数据的批量处理 Jul 17, 2023 pm 10:43 PM

高效利用Vue和Axios实现前端数据的批量处理在前端开发中,数据的处理是一个常见的任务。当我们需要处理大量数据时,如果没有有效的方法,处理数据将会变得十分繁琐和低效。Vue是一种优秀的前端框架,而Axios是一个流行的网络请求库,它们可以协同工作来实现前端数据的批量处理。本文将详细介绍如何高效利用Vue和Axios来进行数据的批量处理,并提供相关的代码示例

PHP Session 跨域问题的解决方法 PHP Session 跨域问题的解决方法 Oct 12, 2023 pm 03:00 PM

PHPSession跨域问题的解决方法在前后端分离的开发中,跨域请求已成为常态。在处理跨域问题时,我们通常会涉及到session的使用和管理。然而,由于浏览器的同源策略限制,跨域情况下默认情况下无法共享session。为了解决这个问题,我们需要采用一些技巧和方法来实现session的跨域共享。一、使用cookie跨域共享session最常

在Vue应用中使用axios时出现“TypeError: bind is not a function”怎么办? 在Vue应用中使用axios时出现“TypeError: bind is not a function”怎么办? Jun 25, 2023 am 08:31 AM

在Vue.js应用中,使用axios是非常常见的。Axios是一个强大的HTTP请求库,可以让你轻松发送异步HTTP请求。然而,在使用axios时,会遇到一些错误,其中之一就是“TypeError:bindisnotafunction”。这个错误通常是由于axios版本不兼容Vue.js的原因导致的。让我们来看一下这个错误的解决方法。首先,我们需要

Vue和Axios实现异步数据请求的同步化处理 Vue和Axios实现异步数据请求的同步化处理 Jul 17, 2023 am 10:13 AM

Vue和Axios实现异步数据请求的同步化处理引言:在现代前端开发中,由于页面需要通过异步数据请求来获取数据并动态展示,因此异步处理成为了不可避免的需求。然而,异步数据请求往往会导致代码逻辑变得复杂,难以维护。在Vue框架中,搭配使用Axios库可以方便地实现异步数据请求的同步化处理,从而提高代码的可读性和维护性。一、Vue简介Vue是一款轻量级的前端框架,

See all articles