Vue中跨域问题的解决

目录

[1 跨域的概念](#1 跨域的概念)

[2 解决办法](#2 解决办法)

[2.1 修改请求实例的公共前缀](#2.1 修改请求实例的公共前缀)

[2.2 修改vite.config.js文件](#2.2 修改vite.config.js文件)


1 跨域的概念

由于浏览器的同源策略限制,向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败

2 解决办法

原理:使得浏览器向两个端口发送请求和接手请求,变成了浏览器只和前端端口交互,后端与前端交互。

2.1 修改请求实例的公共前缀

假如你有个请求的实例如下:

javascript 复制代码
//其它代码
const baseURL = 'http://localhost:8080';    //公共前缀
const instance = axios.create({baseURL});

现需要将其修改成如下:

javascript 复制代码
//保证和前端的端口号相同为5173
//相当于http://localhost:5173/api
const baseURL = '/api';    
const instance = axios.create({baseURL});

2.2 修改vite.config.js文件

初始化情况如下:

javascript 复制代码
//其它代码
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

现在需要向其中添加内容使其变成:

javascript 复制代码
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      //拦截所有包含/api的链接
      '/api': {
        //转换的目标链接将5173转为8080,由前端发送
        target: 'http://localhost:8080',  
        //是否换源,true则转化  
        changeOrigin: true,    
        //使得转换后的链接中的/api变成空字符串
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
相关推荐
DokiDoki之父3 小时前
前端速通—CSS篇
前端·css
pixle03 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19873 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH3 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童3 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
非凡ghost3 小时前
火狐浏览器(Firefox)tete009 Firefox 多语便携版
前端·firefox
文心快码BaiduComate3 小时前
文心快码Comate3.5S更新,用多智能体协同做个健康管理应用
前端·人工智能·后端
袁煦丞3 小时前
极空间变身全能私有云+1Panel傻瓜式部署:cpolar内网穿透实验室第618个成功挑战
前端·程序员·远程工作
袁煦丞3 小时前
10.15-1 Reader电子书管理神器搭配极空间私有云:cpolar内网穿透实验室第488个成功挑战
前端·程序员·远程工作
ZHOUYUANN3 小时前
我用JavaScript复刻了某宝的小游戏动物大迁徙消消乐
前端·javascript·游戏开发