Vue项目解决跨域问题（前端）

1、产生原因
跨域问题产生的原因是浏览器的同源策略。浏览器同源策略是浏览器中的一种安全机制，用于防止一个域下的文档或脚本访问另一个域下的文档或脚本。同源指的是两个URL的协议、主机名和端口号都相同，只有这些都相同的情况下，两个文档之间才满足同源条件。

也就是指，当浏览器地址栏的地址（页面访问地址）和接口访问地址不一样时就会出现跨域问题，浏览器会拦截服务器返回的数据，并报CROS错误。

例如浏览器地址是：localhost:8080/xxx，访问的接口地址是：http://23.43.222.12:8080/xxx，这时候就会出现跨域问题。所以在前后端分离的项目，跨域问题是必然出现的。

注意：

如果主机一样，但是端口不一样也会产生跨域问题，例如浏览器地址栏：localhost:8080/xxx，接口地址：http://localhost:8081/xxx，也是跨域。
2、解决思路
从原因中可以看到，问题产生主要是浏览器的锅，两个服务（后段）之间进行接口调用是不会产生跨域的，因此我们可以使用一个代理，通过代理服务器去调用server，代理服务器返回数据到浏览器，如下图所示

此处的代理，本质就是一个后端服务，通过代理（后端服务）去调用server，拿到数据后在返回给浏览器，同时非常重要的一点，代理服务的访问地址必须和浏览器地址栏中的端口地址一样（localhost:8080），在Vue中提供了这个功能，只需要进行简单的配置即可实现。
3.解决方式

1、找到vue项目中的vue.config.js，在其中的module.exports中添加如下代码，来配置一个
proxy，作用见注释。
2、在使用axios等进行接口调用时，不是调用http://23.43.222.12:8080/core/getData/userInfo，而是调用http://localhost:8080/api/core/getData/userInfo