基于vue-cli3/cli4解决前端使用axios跨域问题

本文主要是介绍基于vue-cli3/cli4解决前端使用axios跨域问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

背景

vue-cli4项目中使用axios请求后端接口时，浏览器出现跨域报错

一、什么是跨域

1.1 跨域

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

1.2 同源策略

是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

1.3 为什么出现跨域

后端代码在A服务器上启动，前端代码在B电脑上启动，此时就会出现跨域。 服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题）

二、配置axios代理解决跨域（纯前端解决跨域问题）

解决跨域问题思路：

我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据。

2.1 配置baseUrl

// main.js

import axios from 'axios'
Vue.prototype.$axios = axiosd
axios.defaults.baseURL = '/api'
复制代码

说明：axios.defaults.baseURL = '/api'作用是每次发送请求都会带一个/api的前缀

2.2 配置proxy

官方配置proxy文档说明

// vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '//111.222.333.444:8888',// 你要请求的后端接口ip+port
                changeOrigin: true,// 允许跨域，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                ws: true,// 开启webSocket
                pathRewrite: {
                    '^/api': '',// 替换成target中的地址
                }
            }
        }
    }
}
复制代码

2.3 组件中发送请求

// 原接口url：http://111.222.333.444:8888/test
// 原请求写法：this.$axios.get('http://111.222.333.444:8888/test')

// 配置proxy代理后请求写法
this.$axios.get('/test')
复制代码

原理说明：我们请求/test，就相当于请求了：localhost:8080/api/test，然后配置的proxy拦截了/api，并把/api以及前面的所有替换成了target的内容，因此实际请求的url是http://111.222.333.444:8888/test

2.4 重启vue项目，已经解决跨域问题

注：在浏览器的调试工具中，proxy代理后的请求url会变更显示为http://localhost:8080/api/test，且不会显示代理前的请求链接

这篇关于基于vue-cli3/cli4解决前端使用axios跨域问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！