2026年前端跨域解决方案面试（前端解决跨域的几种办法）

9月7号笔记

今日所学：网络请求复盘、跨域解决方案、路由配置

网络请求复盘：

昨天学了下网络请求和基本的网络请求内容，但还是有些地方是一知半解的，今天再看看。

instance.interceptors.request.use(拦截器两函数)

这里所使用的.use语句本质上是通过调用.use来声明发生在request之前的一个操作，以此确定了拦截器的添加位置。

不同的error反馈：

//请求拦截器

error => {

return Promise.reject(error);

}

//响应拦截器

error =>{

const { response } = error;

errorHandle(response.status,response.info)

}

请求拦截器和响应拦截器不同的主要原因是发送数据的对象不同，在请求拦截器中发送数据的对象是前端，所以只需要通过promise将所需要拒绝的数据拒绝即可。而响应拦截器则是由于是后端发送的部分数据，所以需要重视其中间传导的一些问题，这时候就需要采用其他的一些方法来实现了，其中最基本的就是状态码读取和信息呈现。

网络请求跨域解决方案：

跨域请求：在一个域名下请求其他域名的资源，举个例子，在百度网页中使用如下指令fetch("https://www.baidu.com") 来请求百度的内容是可行的，但是如果采用对淘宝进行fetch操作就很难了，而在百度下向淘宝进行数据获取的操作就是“跨域操作”。

同源策略：同源策略是网络浏览器的一种安全策略，简单来说就是只允许js代码请求和当前所在服务器域名、端口、协议相通的数据接口上的数据，这就是同源策略。

而js通过“同源策略”来提高网络安全性，反而抵制了“跨域操作”，但是跨域操作又是需要的，所以这时候就需要使用一些独特的方式了。

跨域操作需要在config.js改为如下代码，其中url为目标网站域名：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

devServer:{

proxy:{

'/api':{

target:'<url>',

changeOrigin: true

}

})

后续需要重启本地服务器，重启后从config文件才生效。这样在本地的内容就可以简单很多了。

mounted()

{

axios.get("/api/banner")

.then(res =>{

console.log(res.data.data);

})

}

但是采取这样的方式不就只能访问一个跨域了吗？或者说其实是更换了前端的本地域了？

解释如下：

devServer:{

proxy:{

'/api':{

target:'url',

changeOrigin: true

}

在上述代码中，devserver是在前端构建一个简单的服务器，以此使这个服务器作为桥梁来向后端需要跨域请求的对象进行一个信息的桥接。

Proxy则是向这个简单服务器（开发服务器）进行声明，告诉他对于所有的以/api做开头的地址均需要改写成url链接的格式，而后以changeorigin来保障完全的替换操作。这样在后续的get就被链接完整成一个标准的url了。但是其他非以api打头的都正常使用了。

而如果需要解决多端口问题，则直接添加更多了类似于’/api’这样的声明即可。

VUE引入路由配置：

在先前的html中，我们往往直接通过<a>中的href属性来实现页面和页面之间的跳转，但是对于vue来说，其跳转的对象不再是一个html文件而是一个vue文件，同时，为了实现一些更高级的特性，路由会更加的方便。

基本是依据 vue-router来管理页面之间的关系，但是这个vue-router需要导入，直接使用指令导入即可。

他会使vue构建“单页面应用更加简单”。

单页面应用：整个程序只存在一个页面，在同一页面中进行跳转的基本操作。

基本步骤：

1、导入路由：输入指令 npm install --save vue-router

2、配置独立的路由文件：

在src中建立router如下：

import { createRouter, createWebHashHistory} from "vue-router";

//引入需要关联的页面

import HomeView from "https://www.bilibili.com/view/homeview.vue";

import About from "https://www.bilibili.com/view/About.vue";

//配置信息中需要页面的相关配置

const routes =[

{

//声明后续使用时的路径

path : "/",

//声明使用哪个页面

component:HomeView

{

//声明后续使用时的路径

path : "/about",

//声明使用哪个页面

component:About

}

]

//配置信息

const router = createRouter({

history:createWebHashHistory(),

routes

})

export default router;

3、在main.js中明确所需要路径

createApp(App).use(router).mount('#app')

4、在app.vue中完善所需要的内容

<nav>

<router-link to="/">Home</router-link> |

<router-link to="/about">About</router-link>

</nav>

<router-view/>

但是如果直接基于原有的来似乎不太行，我是基于后来的基于router来配置，这样就可以了。

今天的文章 2026年前端跨域解决方案面试（前端解决跨域的几种办法）分享到此就结束了，感谢您的阅读。

2026年前端跨域解决方案面试（前端解决跨域的几种办法）

相关推荐