Vue 3.0 + Vite +Axios 出现跨域问题如何解决-51CTO.COM

一、使用代理

在 Vite 的配置文件中，可以通过 proxy 选项来配置代理，使得前端代码与接口请求在同一域下。例如：

// vite.config.js
export default {
  // ...
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

在这个例子中，将所有以 /api 开头的请求代理到 http://localhost:3000，同时需要设置 changeOrigin 为 true，表示更改源地址，这样才能避免跨域问题。

二、设置 CORS

如果你无法使用代理，也可以在接口的响应头中设置 CORS（跨域资源共享）。在后端代码中设置Access-Control-Allow-Origin 和其他相关的响应头，以允许跨域请求。例如，在 Node.js 中可以这样设置：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

三、使用 JSONP

JSONP 是一种跨域解决方案，可以通过添加一个 <script> 标签来发送跨域请求。在 Vue 3.0 + Axios 中，可以使用 axios-jsonp 插件来实现 JSONP 跨域。例如：

import axiosJsonp from 'axios-jsonp';

axios({
  url: 'http://example.com/api',
  adapter: axiosJsonp,
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

这里通过设置 adapter 选项来指定使用 axios-jsonp 插件，然后使用 axios 发送请求即可。

四、使用跨域资源共享插件

如果你无法在后端代码中设置 CORS，也可以使用跨域资源共享插件来解决跨域问题。例如，在 Vue 3.0 + Axios 中，可以使用 cors 和 cors-anywhere 等插件。例如：

import axios from 'axios';
import cors from 'cors-anywhere';

const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const apiUrl = 'http://example.com/api';

const axiosInstance = axios.create({
  baseURL: proxyUrl + apiUrl,
});

cors.createServer().listen(8080, () => {
  console.log('CORS Anywhere server running on port 8080');
});

axiosInstance.get('/data').then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

这里通过在前端代码中创建一个跨域资源共享服务器，并将接口请求通过代理转发到这个服务器，从而避免了跨域问题。这种方案需要在前端代码和后端代码中都进行修改，可能会比较麻烦，不过如果其他方案都无法使用的时候，可以考虑使用这种方案。

五、在接口服务器中添加 CORS 配置

如果你有权限修改接口服务器的配置，也可以在服务器中添加 CORS 配置来解决跨域问题。具体的配置方式因服务器不同而异，可以参考服务器的文档进行配置。例如，在 Nginx 中可以这样配置：

location /api {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
  add_header 'Access-Control-Allow-Headers' 'Content-Type';
  proxy_pass http://example.com/api;
}

这里将所有以 /api 开头的请求代理到 http://example.com/api，并在响应头中添加 CORS 相关的配置。