Vue跨域问题的解决

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

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

同源策略

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

问题描述

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

解决办法

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

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

2. 在config文件中配置如下
   如果没有config文件，则需要在目录中创建一个，然后配置如下：
   
   具体的解释已在图中给出，其中"^/api": “”,就相当于本来路径中有/api的，现在直接没了，更简单了

3. 最后一步，更改axios中的请求路径
   就写原本路径减去http://localhost:8080就好，就比如原来要请求的路径为：
   http://localhost:8080/Demo_war/course
   现在写 /Demo_war/course 就好