前端vue3解决跨域问题

前端vue3解决跨域问题

适用环境：vue3+axios

问题产生

简单来说，跨域产生的原因是浏览器请求到的前端网页与前端请求的网页不在同一个域或同一个端口
比如说我访问了百度www.baidu.com这个网页，百度这个网页加载到你的浏览器了，然后你点击了搜索按钮，网页请求www.souhu.com的资源。这个时候问题产生了，由于www.baidu.com与www.souhu.com不是同一个域，浏览器就报错“啊啊啊，你这不能访问啊，拒绝你！”
但是假设网页访问www.baidu.com/aaa.html又不会报错，是因为www.baidu.com/aaa.html与www.baidu.com是同一个域
前后端分离的项目中常常出现这种问题，以前后端可控于是自己在后端解决了。

解决方案

叭叭了半天估计大家也不耐烦了，直接来解决方法吧
做一个代理，通过虚拟的代理服务器访问不同域的网站

步骤一

项目目录下新建 vue.config.js文件，如果有就直接修改

其中这样配置：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://test.com/',//这里填入你要请求的接口的前缀
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                secure: true,                   //是否https接口
                pathRewrite:{
                    '^/api':''//重写路径
                }
            }
        }
    }
}

其中/api的名称你可以修改为你想要的值
而且vue.config.js是自动导入的，一般不需要额外配置所以配置了还是不生效一般是你的问题

步骤二

在你想用的位置import axios

import Axios from "axios"
Axios.defaults.baseURL='/api'

步骤三 愉快的调用吧！

比如我想访问https://test.com/zhuli，那么我配置的/api中target的值为https://test.com，访问时访问/zhuli就OK了，由于前面将Axios.defaults.baseURL改为/api，所以每次访问都有https://test.com的前缀

Axios({
      method:'get',
      url:'/zhuli',
      params: {
       'test':123
      }
    }).then(resp => {
      console.log(resp)
    })

PS

如果你想直接点，可以直接略过步骤二，使用

axios({
      method:'get',
      url:'/api/zhuli',
      params: {
       'test':123
      }
    }).then(resp => {
      console.log(resp)
    })

有同样功效！！！
萌新写文，要是文中有错误还请大佬们批评指正哈

解决方案参照了这位大大的文：axios解决跨域问题（vue-cli3.0）