解决Vue跨域访问后端API问题

---

前言

我们在写前后端分离的时候，请求后端接口是必要步骤，但是这个时候就有个问题，因为前端和后端是归属于不同端口，我们在直接访问后端时，会触发csrf（跨站请求伪造）

---

一、vue.config.js文件

vue项目中可选的配置文件，你可以选择用这个文件去配置vue项目，也可以选择在package.json文件中vue字段去配置，但是你需要严格按照json的写法

提示：我创建完项目之后，里面没有vue.config.js文件，所以我自己在根目录中新增了一个
你创建了这个文件之后，你可以选择上面两种方式中随便一个，作为导出对象即可

二、配置代理参数

// vue.config.js
module.exports = {
	 devServer: {
        proxy: {
        	// 当你vue请求路径中包含/api，那么vue会自动帮你代理请求到你的后端地址
        	// 比如我vue请求的是 '/api/user/getUser'，那么会帮我代理请求到后端地址
            '/api': {
            	// 后端地址
                target: "http://localhost:8081",
                /**
                	官方文档的意思：将主机头的来源更改为目标 URL
                	简单理解就是需不需要代理
                **/
                changeOrigin: true,
                /**
                	重写目标地址，比如我vue请求的是/api/user/getUser
                	经历过重写之后，我们请求的地址是http://localhost:8081/user/getUser
                	这里用的是正则表达式，^符号是用来限制开头
                	意思就是匹配vue请求的开头是否为/api，是的话就进行重写替换
                **/
                pathRewrite: {
                    ["^/api"]: ""
                }
            }
        }
    }
}

---

总结

以上就是解决vue前端如何跨域访问后端接口的方法