vue解决跨域问题的方法

现在的项目，大部分都是前后端分离的，前后端最终也会分开部署，前端部署在服务器 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，不仅后端接收到了请求，前端也接收到了后端的返回信息。

到此这篇关于vue解决跨域问题的方法的文章就介绍到这了,更多相关vue解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论