在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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。