Vue3+Axios跨域问题解决方法

问题

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

解决方法

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

WorkerJs具体代码如下：

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://example.com/path' + url.pathname + url.search;

  // 克隆请求的头部
  const newHeaders = new Headers(request.headers);

  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预检请求，并代理请求到目标接口，然后将目标接口的响应返回给前端。