阅读 2481

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

重要补充:

由于devServer.proxy是以开发环境为基础,所以目前用devServer.proxy作为代理工具处理跨域还暂时只能解决开发环境下,如果是打包后的环境,还需与后端一起联调处理,如果有更好的办法,还请各位大佬不惜吝啬指教~

背景

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,且不会显示代理前的请求链接