Vue代理请求数据出现404

2024-05-18 02:30:36

Vue代理请求数据出现404

当使用代理解决跨域问题出现404错误时，一般有两种原因。

1. 需要进行pathRewrite重写

比如：你想访问的真实地址为http://39.98.123.211/user/list，你请求的url为/api/user/list
下面是你的代理程序

 module.exports = {lintOnSave:false,//配置代理跨域devServer:{proxy:{"/api":{target:"http://39.98.123.211",}}}}

如果没有对/api重写，那么代理完你真实的地址则为：http://39.98.123.211/api/user/list，明显多了/api，
因此会出现404错误。我们进行代理时，路径中有/api，则会使用http://39.98.123.211，
再加上url，则就为我们的请求地址 http://39.98.123.211/api/user/list。所以要对/api重写，
如果你的真实路径中正好为http://39.98.123.211/api/user/list，包含了/api那就不用重写。因此将代码改为：

module.exports = {lintOnSave:false,//配置代理跨域devServer:{proxy:{"/api":{target:"http://39.98.123.211",pathRewrite:{'^/api':'',}}}}}

如果无法解决404错误，则使用第二种方法。

2.将代理代码放入config文件夹下的index.js文件中

如果你是vue3项目则在vue.config.js中写代理即可，如果你是vue2项目，代理请求出现404，
且第一种方法无效，则将代理代码写入config文件夹下的index.js中的proxyTable：{}中

module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {//配置代理跨域"/api":{target:"http://39.98.123.211",},},

由于我的真实地址中有/api所以就没进行/api重写。
记住代理写完，要重写运行项目。

Vue代理请求数据出现404相关推荐

vue异步请求数据重新渲染
vue异步请求数据时往往不能及时更新,下面介绍一种方法解决. export default {name: "pic",created() {this.getList();},dat ...
Vue Get请求数据
VUE的使用之前只是看了数据绑定.筛选这些基本的功能,没有深入接触.接下来的一个项目会用到VUE来开发,所以又简单看看,热热身~ 使用http请求需要用到vue-resource [ https:// ...
十一、Vue之请求数据
vue-resource axios fetch-jsonp 一.vue-resource插件请求数据 (一)安装vue-resource插件备注:在安装组件时,一定要加上 --save ,这样该组 ...
vue.js请求数据
三种方法, 1.是用jq的ajax请求之后将数据放到vue的data中, 2.是用vue-resource请求 3.axios 一.用jq ,ajax异步请求后,接收到返回的data参数并显示在前端 ...
处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题
1. 组件执行顺序导致: 父组件:created->子组件:created->子组件:mounted->父组件:mounted 2.问题子组件无法获取到值 //父组件 exp ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
TP5后端,VUE前端请求聚合数据过去的今天
先上效果: 1: 前端 vue 文件: <template><!--接口地址 http://v.juhe.cn/todayOnhistory/queryEvent.php参数名类型 ...
app接口服务器请求为什么会报错307_Vue接口代理和数据Mock，你会了吗
基于Vue和React脚手架演示各自项目的接口代理和数据Mock. Vue接口代理实现步骤 vue中文官方文档:https://cn.vuejs.org/ vue-cli中文官方文档:https:// ...
Vue3 配置代理和使用全局axios请求数据
更详细请参考: https://blog.csdn.net/qq_28550263/article/details/120633610 vue3中配置全局代理和使用axios向服务器请求数据 main ...

最新文章

热门文章