2025年前端跨域解决方案vue（前端跨域解决方案有哪些）

编程日记 • 2025-12-05 10:57 • 阅读 1

前言

解决方案

一、配置方式

二、使用方式

原理

1.发送请求

2.代理转发

3.修改请求头

4.路径重写

跨域问题的存在主要是由于浏览器的安全策略所导致的。

具体来说，有以下几个主要原因：

1.同源策略 (Same-Origin Policy)：
浏览器的安全机制，要求请求必须来自相同的协议、域名和端口。
2.安全性和隐私保护：
防止恶意网站访问其他网站的数据，避免 CSRF 和 XSS 攻击。
3.CORS (Cross-Origin Resource Sharing)：
服务器可以通过设置 Access-Control-Allow-Origin 头来允许特定来源的跨域请求。

(这里主要以修改vue配置文件里proxy的接口代理方式)

在vue工程文件中找到此文件(这里以vue3为例)

找到server或者devServer(cli构建和vite构建略有不同)

在里面配置

target里写你的后台服务

当然也可以是其他三方接口

(这里使用的是另一种配置方式)

只要在你请求的位置换成你所配置的“/api/”即可

比如你所请求的地址为 'http://localhost:8085/login'

只要改为'/api/login'即可

1.发送请求

当前端应用发送一个请求到 /api/xxx 时，webpack-dev-server 会根据代理规则进行处理。

2.代理转发

webpack-dev-server 检查请求路径是否匹配 /api 前缀。
如果匹配，则将请求转发到 http://localhost:8085/xxx。

3.修改请求头

changeOrigin: true 会修改请求头中的 Origin，使其看起来像是直接从目标服务器发起的请求。

4.路径重写

pathRewrite 选项用于去除请求路径中的 /api 前缀，确保请求正确发送到目标服务器。

今天的文章 2025年前端跨域解决方案vue（前端跨域解决方案有哪些）分享到此就结束了，感谢您的阅读。

2025年前端跨域解决方案vue（前端跨域解决方案有哪些）

1.发送请求

2.代理转发

3.修改请求头

4.路径重写

相关推荐