vue解决跨域问题(Vue-CLI)[通俗易懂]

vue解决跨域问题(Vue-CLI)[通俗易懂]Vue项目中,使用反向代理解决跨域问题,首先在vue项目的根目录下创建vue.config.js文件,然后配置vue.config.js文件,只需两步即可解决跨域问题。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1. 创建vue.config.js文件;

打开项目,在vue项目的根目录下创建vue.config.js文件。

vue解决跨域问题(Vue-CLI)[通俗易懂]


2.配置vue.config.js文件;

module.exports = {
    devServer: {
        proxy: {
            '/api': {                              //需要代理的接口
                target: 'http://39.98.***.211',    //目标服务器
                changeOrigin: true,                //是否跨域
                pathRewrite: { '^/api': 'api' },   //重写
            },
        },
    },
}

举一个栗子?:我需要访问的接口是:http://32.88.***.818/api/abb,123 ,”/api”是一个标识,告诉它只代理接口里面有 “/api” 这个字段的接口,我的目标服务器http://32.88.***.818,即target定义的,pathRewrite重写’^/api’: ‘/api’ 就是在代理是时候使用 /api 代理。


3.调用接口。

  • 第一种情况,重写值为自身(pathRewrite: { ‘^/api’: ‘api’ })
this.axios.get('/api/abb').then((res)=>{
    console.log(res)
})
  • 第二种情况,重写值为空(pathRewrite: { ‘^/api’: ‘ ‘ })

this.axios.get('/api/api/abb').then((res)=>{
    console.log(res)
})

注:此方法只适用于本地开发。如发布到生产环境接口与前端在不同域,需服务器配置代理。

  • 配置代理中 module.exports 是什么意思?

   module.exports 对象是由模块系统创建的。在我们自己写模块的时候,需要在模块最后写好模块接口,声明这个模块对外暴露什么内容,module.exports 提供了暴露接口的方法。

  • 配置代理中 devServer 是什么意思?

     浏览器如果需要开发某些特定功能,需要https浏览器才会给予功能权限, 则开发时我们需要在https环境 下面是配置一个webpack devServer的https环境。

  •  配置代理中 proxy 是什么意思

     proxy 也就是代理,可以帮助我们完成很多事情,例如对数据的处理,对构造函数的处理,对数据的验证,说白了,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/192585.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • loadlibrary 失败 java_LoadLibrary失败,错误代码为14001

    loadlibrary 失败 java_LoadLibrary失败,错误代码为14001我正在使用VisualC2008ExpressEdition来创建仅限资源的DLL.我面临的问题是运行在除了我的另一台计算机上使用DLL的应用程序导致LoadLibrary()函数失败,错误代码为14001.在互联网上搜索似乎是运行缺少MicrosoftVisualC2008RedistributablePackage库的应用程序的计算机的依赖性问题.我的第一步是安装最新…

  • linux上lrzsz工具的安装与使用[通俗易懂]

    linux上lrzsz工具的安装与使用[通俗易懂]lrzsz官网入口:https://ohse.de/uwe/software/lrzsz.htmllrzsz是一个unix通信套件提供的X,Y,和ZModem文件传输协议,可以用在windows与linux系统之间的文件传输,体积小速度快。1.安装:root用户下输入安装命令:yuminstall-ylrzsz安装完毕2.上传文件:终端输入rz…

  • BufferedWriter[通俗易懂]

    BufferedWriter[通俗易懂]  带有默认缓冲的字符输出流。使用:  构造:BufferedWriterbf=newBufferedWriter(“outFilePath”);  写入:write(“thing”);  换行:newLine();  刷新缓冲区,会将内容写进目标文件:flush();  关闭该流的操作:close();importjava.io.BufferedWrit…

  • SD/MMC卡介绍

    SD/MMC卡介绍1.1.什么是MMC卡MMC:MMC就是MultiMediaCard的缩写,即多媒体卡。它是一种非易失性存储器件,体积小巧(24mm*32mm*1.4mm),容量大,耗电量低,传输速度快,广泛应用于消费类电子产品中。1.2.什么是SD卡SD:SD卡为SecureDigitalMemoryCard,即安全数码卡。它在MMC的基础上发展而来,增加

  • Ubuntu16.04安装ros_u盘安装双系统

    Ubuntu16.04安装ros_u盘安装双系统一、win10下安装Ubuntu16.04双系统1、制作系统U盘下载Ubuntu16.04我们首先去Ubuntu官网下一个Ubuntu16.04的iso镜像文件。

  • 《视频直播技术详解》系列之一:开篇[通俗易懂]

    《视频直播技术详解》系列之一:开篇[通俗易懂]此系列为七牛云的原创,仅转载备份,以供查看。随着互联网用户消费内容和交互方式的升级,支撑这些内容和交互方式的基础设施也正在悄悄发生变革。手机设备拍摄视频能力和网络的升级催生了大家对视频直播领域的关注,吸引了很多互联网创业者或者成熟企业进入该领域。七牛云作为一家以基础服务能力见长的云计算公司,于6月底发布了一个针对视频直播的实时流网络LiveNet和完整的直播云解决方案,很多

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号