vue如何解决axios请求出现前端跨域问题

发布时间:2022-01-10 19:10:33 作者:iii
来源:亿速云 阅读:286

本篇内容主要讲解“vue如何解决axios请求出现前端跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何解决axios请求出现前端跨域问题”吧!

vue如何解决axios请求出现前端跨域问题

在正常开发中跨域问题有很多的解决方案。最常见的就是后端修改响应头。但是前端也可以解决,通过反向代理。为了防止下一次这样的错误出现,记录一下,总结一下。

所以现在我们来复盘一下,然后解决掉。

一、为什么会出现跨域的问题?

跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。

在前后端分离的模式下,前后端的域名是不一致的,此时就会发生跨域访问问题。跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的。而axios是通过Promise实现对ajax技术的一种封装,也同样存在跨域问题。

二、解决方案

这里我就使用本机的开启两个不同的端口来测试。

未处理跨域前的报错

vue如何解决axios请求出现前端跨域问题

没有做跨域处理请求是这样的

 axios.get('http://localhost:8080/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

反向代理

前端进行反向代理来解决跨域问题。原理图如下:

vue如何解决axios请求出现前端跨域问题

vue项目的端口是8081

vue如何解决axios请求出现前端跨域问题

自己电脑开启了一个8080的端口,请求/getData就会放回json数据。

配置代理

1.在vue2.0中

修改config文件夹下的index.js文件,在proxyTable中加上如下代码:

   proxyTable: {
      '/apis': {
        target: 'http://localhost:8080/',  //要解决跨域的接口的域名
        secure:false,           //如果是https接口,需要配置这个参数
        changeOrigin: true,  // 如果接口跨域,需要进行这个参数配置
        pathRewrite: {
          '^/apis': ''  // 路径重写
        }
      },
    },

然后在请求中axios中这样写

 axios.get('apis/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

分析:

target后面的就是需要请求的网址的公共部分,然后用/apis来代理这个,最后重写一些路径,请求的时候使用的我们的代理的apis来作为前缀。

这个前缀我们可以自定义,proxyTable是对象,所以我们可以配多个代理。

跨域解决

vue如何解决axios请求出现前端跨域问题

2.在vue3.0中

vue-cli3 脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动创建

新建一个vue.config.js,配置以下信息,同样可以解决。

module.exports = {   
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:8080/',//接口的前缀
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                pathRewrite:{
                    '^/api':''//重写路径
                }
            }
        }
    }
}

到此,相信大家对“vue如何解决axios请求出现前端跨域问题”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. vue使用代理解决请求跨域问题详解
  2. vue中怎么封装axios请求

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue axios

上一篇:Python遍历目录下文件、读取、千万条数据合并实例分析

下一篇:php如何查询类里面有哪些方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》