前端配置了跨域代理,却还是报错

前端配置了跨域代理,反反复复检查了配置文件,也确保配置文件修改过后是保存重启过项目的却还是报错,如下:

Proxy error: Could not proxy request /api/product/getBaseCategoryList from localhost:8080 to
 http://39.38.123.211.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ETI
MEDOUT).

最后查遍了百度,在这个博主这里得到了解决:

前端配置跨域代理_杏子-CSDN博客_前端配置代理

发现我是属于第二种情况,也就是webpack.config.js 文件暴露没有暴露在外,我是在根目录下创建了vue.config.js文件的那种情况,所以需要借助中间件http-proxy-middleware 配置跨域代理。

安装http-proxy-middleware

npm install http-proxy-middleware --save-dev

此时重启项目,问题得以解决!

 

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在使用Vue和Axios请求后端接口时,可能会遇到“跨域报错”的问题。这是因为同源策略的限制禁止从一个源(域、协议、端口)向另一个源发送HTTP请求。 为了解决这个问题,我们可以在后端设置CORS(跨源资源共享)规则,允许前端访问该接口。例如,在Node.js中可以使用中间件cors来实现: const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 允许所有源访问 如果后端不方便设置CORS规则,也可以使用代理服务器的方式进行请求。在Vue的配置文件vue.config.js中添加proxy选项,将请求代理到正确的地址: module.exports = { devServer: { proxy: { '/api': { target: 'http://backend.com', changeOrigin: true, // 改变源 pathRewrite: { '^/api': '' } } } } }; 一旦代理配置好了,我们在Vue组件中的Axios请求就可以使用 apiUrl: '/api/example' 的方式了,这样就能避免跨域的问题产生。 总的来说,Vue和Axios在请求数据时可能会报“跨域报错”,需要在后端设置CORS规则或使用代理服务器的方式进行请求。这些方法都是为了解决同源策略带来的限制问题。 ### 回答2: Vue.js 是一种开放源代码的前端 JavaScript 框架,它可以轻松地构建单页面应用程序和用户界面。它的核心库可以自由地与其他库或现有项目集成。而 Axios 是一个基于 promise 的 HTTP 库,可以在浏览器和 Node.js 环境中使用。它提供了一种使用 HTTP 客户端向 Web 服务发送请求和处理响应的简单而优雅的方式。 在使用 Vue.js 和 Axios 进行前端开发时,由于浏览器的同源策略,可能会遇到“跨域报错”的问题。浏览器的同源策略指的是,当一个文档在一个域名下的时候,它不能访问一个不同域名下的资源。同源策略主要是出于安全考虑,防止恶意脚本跨域获取用户的个人敏感信息。 通常,我们可以通过代理服务器、JSONP、CORS(跨域资源共享)等技术来解决跨域的问题。下面我们来分别介绍一下这几种解决方法。 代理服务器是指在同一个域下建立一个服务器,通过这个服务器来转发请求和响应,在前端页面中发送请求给代理服务器,由代理服务器转发请求到后端服务器,再拿到后端服务器的响应数据,最后将响应传回前端页面。这样做的好处是,不需要关心跨域问题,只需要将代理服务器设置好即可。但是也有一些缺点,例如需要另外再部署一个服务器,增加了服务器的负担。 JSONP (JSON with Padding) 是一种基于 GET 请求的跨域解决方案,其原理是通过 script 标签进行 JSON 数据的获取。JSONP 可以利用 script 标签加载不同域的脚本,服务端返回一段 padding 的 JS 代码,里面包含一个回调函数的调用,JS 引擎解析这段代码,产生一个函数调用,然后 JSON 数据作为参数传给这个函数,这个函数就可以使用 JSON 数据了。JSONP 使用简单,但是只支持 GET 请求,不支持 POST、DELETE 等其他请求方式。 CORS 是一种可以让 Web 应用程序跨域访问资源的机制,它需要浏览器和服务器的共同支持。在服务端设置 Access-Control-Allow-Origin 头部信息,可以指定允许哪些域名访问资源。CORS 使用方便,但是需要服务端来做处理。 综上所述,当遇到 Vue.js 和 Axios 的 “跨域报错” 问题时,可以通过以上三种方式来解决。其中,代理服务器的实现需要另外再部署一个服务器,JSONP 仅适用于 GET 请求,而 CORS 兼容性良好,但需要服务端来进行处理,需要注意的是,在使用代理服务器或 JSONP 时,不要将敏感信息泄露给其他域名。 ### 回答3: Vue是一种JavaScript框架,用于构建用户界面。Axios是一种基于Promise的HTTP客户端,用于在浏览器和Node.js中发送HTTP请求。他们的联合使用可以轻松地从客户端向服务器发送请求和接收响应。然而,由于安全原因,浏览器限制了跨域请求,这导致了许多由Vue和Axios组成的应用程序出现了跨域错误。 跨域请求是指在不同域名下进行的请求,例如:当我们使用 localhost:8080 发起一个请求到 www.baidu.com 时,由于这两个域名不同,会触发浏览器的跨域限制。这样会抛出“跨域报错”。 解决跨域问题的方法有很多种。其中一种常用的方法是在服务器端设置跨域访问的权限。具体地,可以在服务器端设置Access-Control-Allow-Origin头部信息,允许对指定的域名进行跨域请求。而如果没有这样设置,那么客户端会在发送请求的时候被浏览器拦截报错。 除了在服务器端设置外,我们还可以使用JSONP等技术解决跨域问题。JSONP是一种跨域的技术,它利用script标签可以跨域的特性,实现跨域请求。但是,JSONP只能用于GET请求,并且无法处理POST等其他类型的请求。 在使用Vue和Axios时,我们也可以通过设置一些参数来解决跨域问题。例如,我们可以使用Vue-cli的proxyTable来允许本地的服务器代理向远程的API发送请求。我们也可以在Axios中设置withCredentials参数,允许跨域请求携带cookie等认证信息。 总之,跨域报错是由于浏览器的安全机制所导致的,解决方式有很多种,具体的方法要根据不同的场景来进行选择。Vue和Axios也提供了很多方便的工具来解决跨域问题,使得我们可以很轻松地构建出跨域请求的应用程序。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值