vue项目解决跨域问题

 在调用接口时，提示出现错误（No Access-Control-Allow-Origin)

什么是跨域问题？

指的是调用接口请求数据时，接口的域名、端口和协议(http/https)任意一个不同，就是跨域。跨域是浏览器的同源策略导致的，本质是浏览器的一种保护机制，初衷是为了保证用户的安全，防止恶意网站窃取数据。

解决跨域问题

在vue.config.js文件中设置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //关闭eslint校验
  devServer: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000/", // 需要代理的域名
        changeOrigin: true, // 可以使得开发服务器在请求头中加入正确的 Host 信息
        pathRewrite: {
          // 重写匹配的字段 去除 /api 前缀，如果不需要在请求路径上重写为""
          "^/api": ""
        }
      }
    }
  }
})

创建axios实例

const http = axios.create({
    // 通用请求的地址前缀
    baseURL: '/api',
    timeout: 10000,//超时时间
})