这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战

proxy 解决跨域问题

在开发过程中，请求接口在前端遇到跨域问题是非常常见的问题，这里我们使用vite解决跨域问题

加载axios

首先我们加载axios

npm install axios @types/axios

加载依赖记得加载aixos的ts类型声明文件

这里我们做的demo，是每五秒请求一次接口，默认的是api

const getData = () => {
  axios.get('/api').then(res => {
     console.log(res)
  })
}
setInterval(() => {
  getData()
}, 5000)

通过上面我们看得到这个这个api的接口大概是5秒触发一次

这里我们要替换成一个测试接口，比如搜索关键字接口，具体的接口可以在网上百度

这里只写关于vite.config.ts文件的跨域设置

在vite里给我们 提供有开发服务的设置，在这里我们找到了一个server.proxy的api

地址：vitejs.cn/config/#ser…

文件说明，我们可以通过正则替换掉api,如下

server: {
    proxy: {
      '^/api': {
        target: 'xxxxxx',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
}

target 是替换的目标url changeOrigin: 是否开启服务代理 rewrite： 重定向url，替换掉地址信息

五秒过后看我们的NetWork,就能看到我们的请求成功了返回了结果，如下

修改端口号

正常情况下我们启动前端服务，打开是默认的3000端口，假设我们想换个端口，这里我们使用server.portapi修改端口号

具体代码如下：

server: {
    port: 3001,
    proxy: {
     .....
    }
  }

看结果

自动打开浏览器

这个比较常用，我们想直接启动后自动打开浏览器，那么就要使用server.openapi

server: {
    port: 3001,
    open: true,
    proxy: {
     .....
    }
  }

通过设置为true，程序运行起来后就会打开默认浏览器

未完待续...