目录
前言
解决方案
一、配置方式
二、使用方式
原理
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 前缀，确保请求正确发送到目标服务器。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/72708.html