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

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

时间：2021-08-12 01:47:41

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

前言引入跨域问题解决跨域问题常用方法🔥一、proxy解决跨域【常用】🔥二、JSONP解决跨域summary下期预告vue3项目实战中的接口调用方法（三）axios请求vue3+antd v-for循环实现多级菜单栏vue3+antd 菜单栏处理子菜单有无children的两种方法

前言引入

在请求接口的过程中，我们会碰到各种各样的问题，可以分为请求参数（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 urltimeout: 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');// 拼接 urlvar url = req.url + '?callback=' + req.callback.name;// 赋值urlscript.src = url;// 放入头部document.getElementsByTagName('head')[0].appendChild(script);}</script></body></html>