Vue3+Axios跨域问题解决方法

May 31, 2024 1940

问题

写了一个简单的Vue项目，但涉及到请求第三方服务接口，直接请求会出现CORS跨域问题，然后在vue.config.js中使用devProxy 进行pathRewrite解决了开发环境跨域问题，但是部署到生产环境后，浏览器同源策略又导致了CORS跨域限制。

解决方法

使用Cloudflare Worker进行中转，将Vue项目中的baseURL替换为Worker地址，但是由于网络原因，Cloudflare Worker域名被污染，无法在国内访问，需要对Worker进行自定义域名。

address.js

WorkerJs具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
export default {
  async fetch(request, env) {
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        status: 200,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Headers': '*'
        }
      });
    } else {
      return handleRequest(request, env);
    }
  }
};

async function handleRequest(request, env) {
  const url = new URL(request.url);
  const backendUrl = 'https://run-lb.tanmasports.com/v1' + url.pathname + url.search;

  // 克隆请求的头部
  const newHeaders = new Headers(request.headers);
  // 删除可能影响签名的头部
  newHeaders.delete('Host');

  const init = {
    method: request.method,
    headers: newHeaders,
    body: request.method === 'GET' ? null : await request.clone().text()
  };

  const response = await fetch(backendUrl, init);

  const responseHeaders = new Headers(response.headers);
  // 设置跨域相关头部
  responseHeaders.set('Access-Control-Allow-Origin', '*');
  responseHeaders.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  responseHeaders.set('Access-Control-Allow-Headers', '*');

  const body = await response.text();

  return new Response(body, {
    status: response.status,
    headers: responseHeaders
  });
}

这段代码的作用是创建一个服务端函数，它接收前端请求，处理CORS预检请求，并代理请求到目标接口，然后将目标接口的响应返回给前端。