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

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

在vue项目中,前端使用axios向后台请求或提交数据时,如果后台没有设置跨域,浏览器在进行数据请求时会报错。本文主要介绍vue如何解决axios请求前端跨域问题的相关信息,有需要的可以参考。

目录

前言1。为什么会出现跨域问题?第二,解决方案跨域资源共享(CORS)写在最后

前言

最近写纯前端vue项目的时候,在axios请求本地资源的时候遇到了access report 404的问题。这让我很不舒服。搜索信息原来是一个跨领域的问题。

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

所以现在我们来还价,把它处理掉。

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

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

在前后分离模式下,前后端域名不一致,那么就会出现跨域访问的问题。跨域问题来自于JavaScript的同源策略,即只有协议主机名和端口号(如果有)相同,才允许相互访问。也就是说,JavaScript只能访问和操作自己域内的资源,不能访问和操作其他域内的资源。跨域问题针对JS和ajax。Axios是通过Promise对ajax技术的封装,但也存在跨域的问题。

二、解决方案

在这里,我将用这台机器打开两个不同的端口进行测试。

跨域未处理前出错。

不存在像这样的跨域处理请求。

axios . get(' http://localhost:8080/get data ')。然后(res={

console.log(res)

})。catch(错误={

console.error(错误);

})

跨域资源共享(CORS)

进行前端反向代理,解决跨域问题。示意图如下:

1.vue项目的端口是8081。

2.您的计算机打开了8080端口。当您请求/获取数据时,您将放回json数据。

3.配置代理

1.在vue2.0中

修改config文件夹中的index.js文件,并在proxyTable中添加以下代码:

代理表:{

/API ':{

Target:' 3358localhost: 8080/',//要跨域解析的接口的域名

Secure:false,//如果是https接口,需要配置这个参数。

ChangeOrigin: true,//如果接口是跨域的,需要配置这个参数。

路径重写:{

/APIs ':' '//路径重写

}

},

},

然后在请求中用axios写这个。

axios . get(' API/get data ')。然后(res={

console.log(res)

})。catch(错误={

console.error(错误);

})

分析:

在目标的后面是需要被请求的URL的公共部分,然后用/apis来代理这个。最后,重写一些路径,请求时使用我们代理的API作为前缀。

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

跨域解决方案

2.在vue3.0中

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

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

模块.导出={

devServer: {

代理服务器:{

'^/api': {

目标:“3358localhost: 8080/”,接口的前缀

Ws:true,//代理websocked

ChangeOrigin:true,//虚拟站点更需要管理Origin。

路径重写:{

/API ':' '//重写路径

}

}

}

}

}

小结:

ChangeOrigin: true:打开代理:会在本地创建一个假的服务器,然后同时发送和接收请求的数据,这样服务器和服务器就可以交互了。

Apis是接口实际请求的前缀,它代表我们实际接口前缀的公共部分,即协议主机名和端口号。

比如请求接口是localhost:8080/getData,我们只需要传入:getData。

那么公共域名为localhost:8080/,我们请求将接口的公共域名localhost:8080/改为api/!

运行项目显示接口请求的路径为:localhost:8081/apis/getData。

进入代理后,实际的请求路径是:localhost:8080/getData。

写在最后

学习上还是要多读官方文件。关于跨域配置问题,官方文档也给出了很多配置信息,比如vue cli配置。

总结一下最近的现象:只要不能累死,就滚向死亡。大家加油。

关于vue如何解决axios请求前端跨域问题的这篇文章到此为止。关于vue如何解决axios请求前端跨域问题的更多信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: