前端配置了代理，还是跨域怎么回事？

已于 2024-02-25 16:47:35 修改
阅读量384 收藏 1
点赞数
分类专栏： Vue相关 文章标签： 前端
于 2023-09-20 14:48:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58575070/article/details/133079658
版权

前言:

        今天被同事邀请帮忙看bug的时候，遇到了这个问题；代理配了，而且再三确认配置的没问题，项目也重启了，浏览器直接发访问是可以获取到的，但控制台就是报跨域。没办法，再次看代码，最后终于发现了问题。

问题是这位同事在对axios进行二次封装的时候，配置了baseUrl，那么问题来了，如果你配置了代理，又在axios中配置了baseUrl，那么它会将baseUrl和请求路径进行拼接然后去做访问，并不会去走代理；因此，才会一直报跨域的错。

代码:

代理：

axios封装:

学无止境鸭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错
qubes的专栏
01-04 3510
已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错。
用iframe设置代理解决ajax跨域请求问题
01-19
今天在项目中需要做远程数据加载并渲染页面，直到开发阶段才意识到ajax跨域请求的问题。于是想用代理的方式来解决这个跨域问题。 什么是跨域？简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。 方案：在服务器端创建一个静态的代理页面，在客户端用iframe调用这个代理，然后通过iframe的document.getElementById(“proxy”).contentWindow对象来请求ajax。 服务器端的代理页面： 代码如下: <!DOCTYPE html PUB
webpack里如何配置反向代理，怎样配置反向代理，webpack配置反向代理(前后端联调)，如何用反向代理解决跨域问题
01-20
反向代理 一、为啥要叫反向代理        正向代理隐藏真实客户端，反向代理隐藏真实服务端。 二、反向代理解决的问题        反向代理解决的就是跨域，在前后端联调的情况下，前端有服务器，后端也有服务器，那么联调时，就存在跨域问题 三、反向代理的原理         通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，由反向代理服务器去请求真正的url，这样就绕过直接请求真正的url导致跨域问题。 四、反向代理如何使用 在项目目录下cmd 安装axios与http-proxy-middleware模块             npm i axios -S  
vue（2.x，3.0）配置跨域代理
12-14
导语：首先，每一个前端开发人员都应该知道同源策略，同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，所谓同源是指，域名，协议，端口相同。有一个不同时，都将请求不到资源，将无法“跨域”获取资源。 vue3.0 从最新版开始，首先是在所有请求的文件中写好请求 import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) let apiCrfCod = Vue.axios.create({ method:
ArcGIS JS API跨域配置 Proxy 代理
01-21
详细介绍ArcGIS JS API跨域配置 介绍Proxy 代理不同web服务器环境部署和调用
vue proxy代理失效无法跨域问题
前端成长之路
11-24 4106
今天在研究vue代理跨域的时候，发现了一个很奇怪的问题：vue配置代理访问本地的node接口时，出现跨域问题，但是proxy代理配置的又没有问题。
vue后台管理系统，proxy代理，api字段相同，但请求服务域名不同产生跨域的问题解决
FTEzreal的博客
02-20 1031
vue后台管理系统，proxy代理，api字段相同，但请求服务域名不同产生跨域的问题解决
前端解决跨域问题
m0_46104664的博客
06-02 2997
前端解决跨域问题
理解并解决【跨域】问题--通过代理或【CROS】
dfghjkkjjj的博客
03-10 1428
是一个位于客户端和目标服务器之间的服务器(代理服务器)，为了从目标服务器取得内容，客户端向代理服务器发送一个请求并指定目标，然后代理服务器向目标服务器转交请求并将获得的内容返回给客户端。,端口不同）的服务器，只需要请求相同的源的服务器就可以解决这个问题，这就用到了代理，所有请求都请求相同的。，对于部分请求（主要是获取静态资源的，不涉及跨域问题）直接返回对应资源，对于涉及跨域的请求，让。既然跨域浏览器不允许，那就直接告诉浏览器允许跨域----后端接口允许跨域，也可以解决跨域问题。这样解决了跨域问题问题。
proxy反向代理解决前端跨域问题vue2
qq_49438920的博客
09-03 748
proxy解决跨域的原理主要是基于跨域只会出现浏览器与服务器之间，而服务器与服务器之间进行网络请求就不会出现跨域，所以先配置proxy后会将请求发送给本地服务器，再由本地服务器发送给目标服务器，本地服务器获取到数据后再与客户端通信。
详解基于angular-cli配置代理解决跨域请求问题
12-09
1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本。为了提升开发效率，前后端分离的需求越来越被重视，后端负责业务/数据接口，前端负责展现/交互逻辑，同一份数据接口，我们可以定制开发多个版本。 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下，进而会产生跨域问题。 2.通用解决方案 如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略：CORS了。 CORS全称Cross-Origin Resourc
解决前端跨域问题（代理服务器）
最新发布
m0_69853343的博客
09-07 412
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。代理服务器的请求地址：必须与浏览器的请求地址相同，使用浏览器与代理器的服务器就不会存在跨域问题。注意:设置了代理服务器后，浏览器发axios请求的地址就是 代理服务器的地址，也就是浏览器的地址。服务器与服务器之间是不会存在跨域问题，所以代理服务器与服务器之间不会存在跨域问题的。简单说就是：浏览器的地址与请求服务器的地址不同。如果你想要更多的代理控制行为，也可以使用一个。
【网络】浅谈前端跨域问题及使用代理解决跨域问题
weixin_48989252的博客
11-01 1400
一、是什么 是由于浏览器存在的同源策略，**ajax请求资源和当前位置**是否同源。 同源：协议、域名、端口号必须完全一致， 违背同源策略就是跨域。 二、特点 （1）跨域只存在于浏览器发请求，服务器不会。 （2）http分两大类：普通http请求和ajax请求，跨域出现在ajax请求中。 三、解决方案 1、jsop 1、介绍 非官方跨域解决方案，只支持get请求 2、工作原理 在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP就是**利用script标签的跨域
web前端 代理服务器解决跨域
m0_72584945的博客
11-12 790
web前端 代理服务器解决跨域
前端开发：深入使用proxy代理解决前端跨域问题
m0_59194131的博客
07-05 3691
在前端领域里面，跨域指的是浏览器允许向服务器发送跨域请求，进而克服Ajax只能同源使用的局限性限制。同源策略是一种约定，而且是浏览器中最基本也是最核心的安全功能，若缺少了该策略，浏览器非常容易被攻击；同源就是指“协议+域名+端口”都一样，就算有两个不同域名指向同一个IP地址也不能是同源。同源策略只有在浏览器中存在，服务器中确不存在，所以遇到需要跨域请求的地址将其转发服务器后委托服务器去请求即可。 一、实际开发中遇到的跨域问题解决方法 先来举一个简单的例子说明一下。首先来看一下跨域引起的报错提示：.
vue项目中使用代理处请求理跨域问题
bigpatten的博客
05-13 707
依然是设置项目根目录的 vue.config.js 对其配置中的 devServer.proxy 进行设置： module.exports = { devServer: { open: true, port: 8888, proxy: { '/api': { // API服务器的地址 target: 'https://shop.ruan.work/', // 如果是https接口，需要配置这个参数 sec
vue axios 请求跨域
忙碌的菠萝
11-25 546
接上篇vue baseUrl多后端环境切换，换成真实的地址后发现接口总是不通，这对这个vue的配置还是理解不到位，这回做了波实验终于通透了 请求封装思路 1、将axios后端请求和前端请求分离开 这点是用baseURL做到，前端不需要baseUrl，baseURL可以直接配置成后端的公共地址 如果不用代理而直接请求的话，可以是这个样子： let host = 'localhost'; let port = '8080'; // 创建axios实例 const service = axios.create({
vue配置代理解决跨域问题
sudo0m的博客
07-04 621
你可以根据你的具体需求和后端配置进行相应的修改。确保在项目根目录下的。文件中添加这个配置，然后重新启动开发服务器，代理配置就会生效。选项来设置代理以解决跨域问题。在这个示例中，我们设置了一个代理，将以。通过这个配置，当你在开发环境中发送。的请求时，它会被代理到。
vue配置跨域无效问题
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
04-02 9473
vue配置proxy跨域代理后还是提示跨域问题 🔥多半是没有正确配置使用 proxy 检查配置使用 vue.config.js配置proxy devServer: { open: true, host:'88.1.131.35',//用来启动Network port: 8000, proxy: { '/api': { target: 'http://xxxxxxxxxx:8000', changeOri
前端配置代理跨域是怎么一个流程啊
06-07
前端配置代理跨域的流程一般如下： 1.在项目中安装一个代理服务器，如 http-proxy-middleware 或 http-proxy 等。 2.在项目中创建一个代理配置文件，如 proxy.config.js 或 proxyTable 等。 3.在代理配置文件中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值