| 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/, '') // 重写请求
}
}
}
})
🔥创捷 axios 实例时，将 baseUrl 设置为 ‘/api’
（这里的api可以是其他，确保使用时保持一致即可）
代码示例：
// 引入axios封装
import axios from 'axios'
// 创建axios实例
const request = axios.create({
baseURL: '/store', // url = base url + request url
timeout: 5000 // 5s超时
})
二、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>
summary
跨域问题的解决在请求接口过程中是必行之路，因此需要一个通用且高效的方法解决跨域。
下期预告
vue3项目实战中的接口调用方法（三）axios请求
vue3+antd v-for循环实现多级菜单栏
vue3+antd 菜单栏处理子菜单有无children的两种方法
（如果对此专栏内容感兴趣，可订阅本专栏，后续会不定期更新内容~）
转载：https://blog.csdn.net/XSL_HR/article/details/127813674
查看评论