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