如果你是一个Web前端工程师，那么跨域这个问题肯定是绕不开的！😄😏😟

1. 创建 vue.config.js

设置 devServer 属性

module.exports = {      devServer: {                //webpack-dev-server配置host : 'localhost',       port : 8080,            //配置本项目运行端口proxy: {                //配置代理服务器来解决跨域问题'/api': {target: 'http://localhost:3000',      //配置要替换的后台接口地址changOrigin: true,                      //配置允许改变OriginpathRewrite: {'^/api': ''}},}},
}

2. axios 设置

import axios from 'axios'export default function ({data}) {const baseUrl = '/api'const server = axios.create({baseURL: baseUrl,timeout: 5000})return server(data)
}

3. 封装请求api

import request from '@/utils/http/request.js'
export function userListApi () {return request ({data: {url: '/userList',method: 'GET'}})
}

4. 发送请求

<script>
import { userListApi } from '@/api/user'
export default {name: 'Index',mounted () {this.getUserList()},methods: {async getUserList () {let result = await userListApi()console.log(result.data)}}
}
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XPyAWzgD-1635902109379)(E:\筆記\vue解決跨域問題\result.PNG)]

总结

解决跨域的办法其实还有很多，像 jsonp、cors、nginx 等…

其实在开发中一般情况下是后台来解决跨域的（我个人想法，不代表所有），但是如果非要前端来解决我们也有办法。记得刚开始接触跨域这个问题的时候，百思不得姐。最終還是有點理解了，最近在學習Vue再次碰到跨域的問題，就拿Vue再來解決一下跨域問題，記錄留念。