当前位置:首页 > 技术分析 > 正文内容

每日分享- Vue 3.0 + vite + axios 出现跨域问题如何解决

ruisui884个月前 (01-15)技术分析22

在 Vue 3.0 + Vite + Axios 中,如果接口请求的地址与前端代码不在同一域下,就会出现跨域问题。这种情况下,可以采取以下几种简单的解决办法:

一 使用代理

在 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,同时需要设置 changeOrigintrue,表示更改源地址,这样才能避免跨域问题。

二 设置 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 中,可以使用 corscors-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 相关的配置。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/317.html

分享给朋友:

“每日分享- Vue 3.0 + vite + axios 出现跨域问题如何解决” 的相关文章

如何在 Linux 发行版中安装微信和 QQ?

很多人因为工作沟通的原因需要用到微信和 QQ,那么如何在 Linux 发行版中安装微信和 QQ 呢?以下是一些尝试的解决方法。QQ上一个版本的 QQ Linux 版还是在2009年,而在现在,基于 NT 架构的全新 QQ Linux版已经被正式推出,为所有用户提供下载。新版本提供了deb、rpm、A...

Gitlab概览

Gitlab是开源的基于Git的仓库管理系统,也可以管理软件开发的整个生命周期,是项目管理和代码托管平台,支撑着整个DevOps的生命周期。Gitlab很容易选为GitHub,作为公司私有库管理的工具。我们可以用Gitlab Workflow来协同整个团队的软件开发管理过程。软件开发阶段Gitlab...

迁移GIT仓库并带有历史提交记录

迁移git仓库开发在很多时候,会遇到一个问题。GIT仓库的管理,特别是仓库的迁移。我需要保留已有的历史记录,而不是重新开发,重头再来。我们可以这样做:使用--mirror模式会把本地的分支都克隆。// 先用--bare克隆裸仓库 git clone git@gitee.com:xxx/testApp...

代码分支规范

一.gitflow工作流说明:主分支:master,稳定版本代码分支,对外可以随时编译发布的分支,不允许直接Push代码,只能请求合并(pull request),且只接受hotfix、release分支的代码合并。gitlab上做限制。热修复分支:hotfix,针对现场紧急问题、bug修复的代码分...

HTML5+眼球追踪?黑科技颠覆传统手机体验

今天,iH5工具推出一个新的神秘功能——眼动追踪,可以通过摄像头捕捉观众眼球活动!为了给大家具体演示该功能的使用,我做了一个案例,供大家参考。实际效果如下:案例比较简单,就是通过眼动功能获取视觉焦点位置,剔除用户看中的牌。现在,舞台的属性中多了一个“启用眼动”的选项,另外,还多了一个“启用摄像头”的...

「干货」FPGA设计中深度约束技巧及调试经验总结

今天跟大家分享的内容很重要,也是我们调试FPGA经验的总结。随着FPGA对时序和性能的要求越来越高,高频率、大位宽的设计越来越多。在调试这些FPGA样机时,需要从写代码时就要小心谨慎,否则写出来的代码可能无法满足时序要求。另外,最近跟网友聊天时,有谈到公众号寿命的问题,我觉得网络交换FPGA公众号应...