什么是跨域？如何解决跨域问题？

现在的项目，大部分都是前后端分离的，前后端最终也会分开部署，前端部署在服务器 192.168.150.200 上，端口 80，后端部署在 192.168.150.100上，端口 8080

我们打开浏览器直接访问前端工程，访问url：http://192.168.150.200/login.html

然后在该页面发起请求到服务端，而服务端所在地址不再是localhost，而是服务器的IP地址192.168.150.100，假设访问接口地址为：http://192.168.150.100:8080/login

那此时就存在跨域操作了，因为我们是在 http://192.168.150.200/login.html 这个页面上访问了http://192.168.150.100:8080/login 接口

区分跨域的维度：

• 协议

• IP/域名

• 端口

只要上述的三个维度有任何一个维度不同，那就是跨域操作

举例：

http://192.168.150.200/login.html ----------> https://192.168.150.200/login [协议不同，跨域]

http://192.168.150.200/login.html ----------> http://192.168.150.100/login [IP不同，跨域]

http://192.168.150.200/login.html ----------> http://192.168.150.200:8080/login [端口不同，跨域]

http://192.168.150.200/login.html ----------> http://192.168.150.200/login [不跨域]

现在我们已经了解了什么是跨域，现在我们探究，如何去解决。

无论是前端还是后端都可以解决跨域的问题，但是我个人认为，在前端解决更加方便和简单，因此我们现在看怎么在前端解决跨域的问题。

首先在我们的vue前端工程中找到main.js文件，通常在App.vue同级。

我们加入这两行代码：

Vue.prototype.$axios = axios
axios.defaults.baseURL='/api'

这样，我们在从前端往后端发送请求时，路径上都会默认添加/api这一级路径，当然你可以换成任何你喜欢的单词。

然后找到vue.config.js，通常在你项目的根目录之下。

我们加入以下几行代码：

其中port是你本机vue项目的端口，一般情况下文件中原先就存在，可自行修改成其他端口。

 proxy: {
      '/api': {
        target: 'http://localhost:8090', // 后端服务地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 路径重写，将请求中的 '/api' 前缀去掉
        }
      }
    }

然后我们随便写两行代码测试一下，先把后端代码启动起来：

然后我们再把前端代码启动：

然后我们访问：http://localhost:8091/

可以看到：

因为是做测试例子，所以只有一个简易的界面，现在我们输入信息，点击登录

显示登录成功，这时，我们在查看控制台

ok，不仅后端接收到了请求，前端也接收到了后端的返回信息。