vue3项目实战的请求接口问题（一）跨域问题+解决方法

vue3 跨域问题➕常用解决方法

前言引入
跨域问题
解决跨域问题常用方法🔥
- 一、proxy解决跨域【常用】🔥
- 二、JSONP解决跨域
summary
下期预告

vue3请求接口相关文章【点击可进入相关文章查看】
vue3项目实战中的接口调用🔥
vue3项目实战中的接口调用方法（一）async/await用法 🔥🔥
vue3项目实战中的接口调用方法（二）fetch用法 🔥

前言引入

在请求接口的过程中，我们会碰到各种各样的问题，可以分为 请求参数（Body）（参数名，数据格式）、请求地址（URL），其中*请求地址会涉及到 跨域问题 的解决，从而实现请求地址的成功请求。
👏👏👏本期文章将会介绍跨域问题，并推荐两种用在不同领域的解决方法。👏👏👏

跨域问题

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时，那说明跨域了。（如下图👇👇）

跨域是因为浏览器的同源策略所导致，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，同源是指：域名、协议、端口相同。

在这里插入图片描述

解决跨域问题常用方法🔥

以下是比较常用的两种方法。对于后台而言，推荐第一种方法。

一、proxy解决跨域【常用】🔥

🔥在 vue.config.ts 中设置如下代码片段
在这里插入图片描述
完整代码示例：（根据需求替换）

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),],
    server: {
      // port:5000,
      cors: true,
      proxy: { // 配置跨域
        '/store': {
          // target: 'http://my.mcdd.top:9527/',
          target: 'http://localhost:1347/', // 根据需求替换 请求后台接口
          changeOrigin: true, // 允许跨域
          ws: true,
          rewrite: (path) => path.replace(/^\/store/, '') // 重写请求
      }
      }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

🔥创捷 axios 实例时，将 baseUrl 设置为 ‘/api’
（这里的api可以是其他，确保使用时保持一致即可）

在这里插入图片描述
代码示例：

// 引入axios封装
import axios from 'axios'

// 创建axios实例
const request = axios.create({
    baseURL: '/store', // url = base url + request url
    timeout: 5000 // 5s超时
})
1
2
3
4
5
6
7
8

二、JSONP解决跨域

Jsonp(JSON with Padding) 是json的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即 跨域读取数据。

<!DOCTYPE html>
       <html>
       <head>
           <meta charset="utf-8">
       </head>
       <body>
       <div id="textID"></div>
       <script type="text/javascript">
           function text_jsonp(req){
               // 创建script的标签
               var script = document.createElement('script');
               // 拼接 url
               var url = req.url + '?callback=' + req.callback.name;
               // 赋值url
               script.src = url;
               // 放入头部
               document.getElementsByTagName('head')[0].appendChild(script);
           }
       </script>
       </body>
       </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

summary

跨域问题的解决在请求接口过程中是必行之路，因此需要一个通用且高效的方法解决跨域。

下期预告

vue3项目实战中的接口调用方法（三）axios请求

vue3+antd v-for循环实现多级菜单栏

vue3+antd 菜单栏处理子菜单有无children的两种方法

（如果对此专栏内容感兴趣，可订阅本专栏，后续会不定期更新内容~）

相关阅读:
系统架构设计师考试题库重点案例：软件系统建模
【函数式编程】Java函数式编程学习
说说教育机构教学课程视频加密是如何实现的？
Win11如何获得最佳电源效率？
Docker搭建Vulhub漏洞环境
cocos2dx中，将png图片打包plist图集，使用什么工具呢？
吴恩达deeplearning.ai:使用多个决策树&随机森林
springboot+vue乡镇村委会日程办公管理系统
【Node.js项目】大事件项目：后台架构图（含具体技术栈）、典型代码
【一】【计算机网络】win基本命令

原文地址：https://blog.csdn.net/XSL_HR/article/details/127813674