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

置顶 Dorable_Wander

已于 2022-12-09 19:01:37 修改

阅读量6.5k

点赞数 14

分类专栏： Vue 文章标签： vue.js javascript 前端 typescript 前端框架

于 2022-11-11 23:02:24 首次发布

本文链接：https://blog.csdn.net/XSL_HR/article/details/127813674

版权

Vue 专栏收录该内容

39 篇文章 55 订阅

订阅专栏

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/, '') // 重写请求
      }
      }
    }
})

🔥创捷 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的两种方法

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

Dorable_Wander

关注

14
点赞
踩
31

收藏

觉得还不错? 一键收藏
打赏
6
评论
vue3项目实战的请求接口问题（一）跨域问题+解决方法

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

扫一扫