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

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

ruisui883个月前 (01-15)技术分析20

在 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和容器为王,微软推出自己的发行版Azure Linux

看到今天的微软,其前CEO史蒂夫.鲍尔默肯定会后悔在15年前说过的一句话“Linux 是一种癌症(Linux is a cancer)”。 因为今天的微软不光靠Linux赚的钵满盆满,而且还发行了自己的Linux发行版Azure Linux。为了提高其云服务和容器化服务水平,其Azure公有云平台提...

「干货」通俗易懂的Deno 入门教程

作者: semlinker转发链接:https://mp.weixin.qq.com/s/2eqRTsf_z7Bcs6dziXe73Q一、Deno 简介Deno 是一个 JavaScript/TypeScript 的运行时,默认使用安全环境执行代码,有着卓越的开发体验。Deno 含有以下功能亮点:默...

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

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

USB电池充电基础:应急指南

USB为便携设备供电与其串行通信功能一样,已经成为一种标准应用。如今,USB 供电已经扩展到电池充电、交流适配器及其它供电形式的应用。应用的普及带来的一个显著效果是便携设备的充电和供电可以互换插头和适配器。因此,相对于过去每种装置都采用专用适配器的架构相比,目前的解决方案允许采用多种电源进行充电。毋...

关于Vue页面跳转传参,参数不同, 但页面只获取参数一次的问题

#头条创作挑战赛#1.问题描述问题描述: element 展示表格(页面A),点击表格的每一行的查看详情按钮,可以携带此行的信息参数跳转到另一个页面(页面B),但是从A页面到B页面,只有第一次跳转的时候B页面可以获取到A页面的参数,返回再次A->B ,B页面无法获取到参数。2.解决办法:方法一...

Vue真是太好了 壹万多字的Vue知识点 超详细!

1??、Vue和其他两大框架的区别Angular 学习成本太高React 代码可读性差Vue 学习成本较低 很容易上手VUE官方: https://cn.vuejs.org/v2/guide/comparison.html?2??、Vue是什么Vue是一套用于构建用户界面的渐进式框架 "前端...