Vue跨域问题的解决

更新了就是出大bug了

已于 2022-10-25 00:00:01 修改

阅读量823

点赞数

分类专栏： JavaWeb实战文章标签： vue 1024程序员节

于 2022-10-24 23:57:22 首次发布

本文链接：https://blog.csdn.net/dapi558/article/details/127504354

版权

JavaWeb实战专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了跨域的概念，即浏览器的同源策略带来的安全限制，防止恶意攻击。通过一个黑客利用iframe窃取银行登录信息的例子，阐述了同源策略的重要性。同时，针对常见的跨域问题，提供了前端解决方案，包括在main.js中设置axios的基础URL，修改config文件以处理/api路径，以及调整axios请求路径。这些步骤旨在简化和解决前后端交互时的跨域问题。

摘要由CSDN通过智能技术生成

什么是跨域以及为什么会有跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。即浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的,是浏览器对javascript 施加的安全限制，防止他人恶意攻击网站。
举一个例子：一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。

同源策略

采用CSDN博主「@Demi」文章中的解释：同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

问题描述

因为每次都是先着急解决问题后再写的博客，没能截图，总之就是很常见的跨域问题

解决办法

本来想着就一个常见的跨域问题，再加上之前好像也经常听说就觉得应该挺好解决，但是自己实际按照不少博主的方法来还是感觉存在一定的出入。搜索到了很多方法，有后端写过滤器的也有前端处理的，以及一些还看不太懂的方法，这里暂时只试了前端的处理：

首先，在main.js下加入：axios.defaults.baseURL = “/api”;
这个的大概意思是默认请求的路径为/api，而这个/api有对应的值，第二步就是对/api进行设置。它的作用就相当于简写偷懒，就比如请求的路径都是以http://localhost:8080开头的，现在用/api代替就行了，而且这个/api默认就在路径最前边，所以路径里就默认有了http://localhost:8080（emmmm，可能表述的不是很清楚也不太准确）
在config文件中配置如下
如果没有config文件，则需要在目录中创建一个，然后配置如下：

具体的解释已在图中给出，其中"^/api": “”,就相当于本来路径中有/api的，现在直接没了，更简单了
最后一步，更改axios中的请求路径
就写原本路径减去http://localhost:8080就好，就比如原来要请求的路径为：
http://localhost:8080/Demo_war/course
现在写 /Demo_war/course 就好