在vite开发服务器中处理跨域问题

跨域问题

跨域问题仅仅会在浏览器中出现，因为浏览器有同源策略，不允许不同源的请求。

同源策略

同源策略是浏览器的一个安全策略，它要求一个域名下的网页只能请求同域名下的资源，不同域名下的资源不能请求。
比如：https://www.baidu.com:443下的网页不能请求https://www.google.com:443下的资源。

浏览器对于这方面的要求是：

  1. 协议相同
  2. 域名相同
  3. 端口相同

https://www.baidu.com:443
https://www.google.com:443

这两个源协议、端口都相同，但是域名不同，所以不满足同源策略。浏览器在处理过程中会先把我们的请求进行放行，但是会对我们的响应进行拦截。

下面这里起一个示例的vite项目进行演示。

  1. 新建一个目录
  2. 进入目录，执行yarn init -y
  3. 执行yarn add vite -D
  4. 配置package.json文件，添加如下内容(一些项目启动和打包的命令)
1
2
3
4
5
6
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}
  1. 新建文件index.html
  2. 新建目录src，src目录下新建一个文件index.js

下面是一些文件的内容

1
2
3
4
5
fetch('https://www.baidu.com').then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="src/index.js" type="module"></script>
</body>
</html>

配置完毕之后来到项目的根目录下面执行yarn dev启动项目，打开浏览器的控制台，会看到如下的错误信息：

打开浏览器的网络面板，可以看到我们请求百度是成功的，但是浏览器拦截了我们的响应。问题就出在浏览器的同源策略上。

vite开发服务器处理跨域问题

那要怎么处理呢，上文提到了，跨域问题仅仅会在浏览器中出现，那我们绕过浏览器，直接去请求百度，不就可以了。

在处理前端请求的时候，将请求先发送到我们的vite开发服务器，然后由vite开发服务器去请求百度，通过代理的方式将响应返回给浏览器。

配置代理之后，当请求实际上请求的是我们的vite开发服务器，vite开发服务器再去请求百度，然后将响应返回给浏览器。
由于网站和我们的vite开发服务器是同源的，所以浏览器不会拦截我们的响应。

vite开发服务器配置代理

在根目录下新建一个文件vite.config.js，在文件中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
import {defineConfig} from "vite"

export default defineConfig({
    server: { // 配置开发服务器
        proxy: { // 配置跨域解决方案
            "/api": {
                target: "https://www.baidu.com",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, "")
            },
        }
    },
})

并且修改index.js中请求的url改为/api

打开浏览器控制台的网络选项卡

并且查看响应(response)的内容

可以看到我们的请求成功了，而且响应也成功了。