Vite + Axios跨域问题

跨域问题指的是不同站点之间，使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制，它的初衷是为了保证用户的安全，防止恶意网站窃取数据。但这个保护机制也带来了跨域问题。

跨域的定义

在请求时，如果出现了以下情况中的任意一种，那么它就是跨域请求：

1. 协议不同, 如 http 和 https
2. 域名不同
3. 端口不同

解决方式

后端解决(⭐️⭐️⭐️⭐️⭐️)

什么？后端不愿意解决？那就接着往下看。

Nginx反代(⭐️⭐️⭐️⭐️⭐️)

在上生产环境时，可以使用nginx来做反向代理，从而也可以解决跨域。这也是一种比较推荐的方式，但是今天在这就不讨论了。

前端解决

如果后端死都不愿意解决，那就到了我们今天的主题Vite + Axios通过代理解决跨域问题

TIPS: 不过这种方式只能在开发环境使用，生产环境会失效

在vite.config.ts/js里加入如下配置

它的作用就是通过配置代理表将请求的目标地址设为代理服务器的地址, 例如将请求的基础url设置为/api，当浏览器发送请求时会先将请求发送到代理服务器然后再由代理服务器转发给目标服务器，从而绕过同源策略的限制。

1
2
3
4
5
6
7
8
9
10
11
12
13

server: {
  proxy: {
    '/api': {
      target: 'http://接口主机地址:8080',
      secure: false,
      changeOrigin: true, //this one is declare for cross
      rewrite: path => {
        console.log(`网络请求: ${path.replace('/api', '')}`)
        return path.replace(/^\/api/, '')
      }
    }
  }
}

然后修改axios的基本配置

1
2
3
4
5

// 创建axios实例
const serve: AxiosInstance = axios.create({
  baseURL: '/api',
  timeout: 10000
})

文末;

没啥好总结的

👌 加纳~;

前端, 技术分享 — 2024年6月11日