-
vue加跨域代理静态文件404_宝塔Apache服务器,Vue项目跨域404
2020-12-19 11:43:43最近,换了下服务器,用vue开发的项目,前后端分离的,部署后发现这样的问题:所有访问api的url返回的都是404,该项目前端包括3个部分,pc端、h5端以及小程序,他们都是访问同一个接口地址。小程序是没有问题,说明...最近,换了下服务器,用vue开发的项目,前后端分离的,部署后发现这样的问题:
所有访问api的url返回的都是404,该项目前端包括3个部分,pc端、h5端以及小程序,他们都是访问同一个接口地址。小程序是没有问题,说明接口服务不存在问题。
目前出现问题的是pc端和h5端。
说下我的服务器环境吧:
1、tomcat8,(提供接口服务的)
2、Apache2.4.43
该项目用到的环境就这2个,当然mysql数据库就不多说了。
后来经过一系列的排查,是apache设置的缘故。需要在前端站点的【配置文件】下加下以下代码:
ProxyPass /api http://www.xxx.cn
另外,在看下我的proxyTable配置吧proxyTable: {
'/api/*': {
target: 'https://www.xxx.cn',
changeOrigin: true,
pathRewrite: {
'/api': ''
}
}
},
其实在我们之前的文章也讲过这个配置了,只是后来忘记了:Apache服务器配置跨域:通过设置反向代理进行跨域
对于proxyTable设置不明白的,还可以看下本站的这篇文章:vue跨域proxyTable配置详解
-
vue加跨域代理静态文件404_vue-cli 设置跨域代理 线上地址报404
2021-01-12 02:42:10vue-cli 设置跨域代理,本地正常访问,线上地址报404。这是什么原因?vue-cli中跨域代理设置:module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target:...vue-cli 设置跨域代理,本地正常访问,线上地址报404。这是什么原因?
vue-cli中跨域代理设置:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://xxx.xxx-xxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
// Various Dev Server settings
host: ip(), // can be overwritten by process.env.HOST
port: 9999, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
utils.js 文件中的请求地址设置:
function network (path, flag) {
if (flag) {
return `api/${path}`
}
return `api/api/${path}`
}
本地请求正常,线上请求会报404 的错误,线上报错图片:
-
vue cli3 代理跨域 404(失败)问题
2019-08-28 09:31:33情景:在写vue cli 中的代理时,百度了好久也没代理上,最终的问题出在路径重写上。特此记录一下,如果有跟我有一样问题的小伙伴,欢迎前来参考,可根据各自情况和实际问题进行调试。 接口地址: 代理地址为...情景:在写vue cli 中的代理时,百度了好久也没代理上,最终的问题出在路径重写上。特此记录一下,如果有跟我有一样问题的小伙伴,欢迎前来参考,可根据各自情况和实际问题进行调试。
接口地址:
代理地址为(开发环境):
// .env.development 文件中
、
VUE_APP_BASE_API 在不同环境( .env.production文件, .env.staging等文件中)为不同地址。如没有此处,代理地址写死的话,下面的proxy中也要将对应代理地址改掉。如:part2中。
注意:百度上搜的重新路径都是 ‘’ (空路径),一直代理不过去。找了半天发现需要代理到 '/' (根路径)。卡了好久,距离就差了这一点点问题(啊 啊啊啊 啊啊)。
*此处需要根据自己的接口状况来调试代理路径地址
浏览器中接口requestURL显示:
response中已返回数据:
(part2)不需动态改变proxy需代理的路径(即:下图 'api' 位置处)
//vue.config.js 文件中
将地址中 '/api' 代理到 '/' 中.
输出为:http://127.0.0.1:8080/userInfo/getUserInfoList.do
-
vue加跨域代理静态文件404_解决VueCil代理本地proxytable无效报错404的问题
2020-12-19 11:43:46前言因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人;正文1. 为什么要使用代理?代理的作用是:把...前言
因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人;
正文
1. 为什么要使用代理?
代理的作用是:把请求代理转发到其他服务器的中间件;
例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个请求怎么办?
这时候就要使用代理来解决!
2. 在vue中如何使用多个代理?
module.exports = {
dev: {
proxyTable: {
// 第一个代理
'/api-test': {
target: 'https://www.example.org:', /// 目标服务器 host
ws:true, //是否启用websocket
secure: true, // 如果是https接口,需要配置这个参数
changeOrigin: true, // // 默认false,是否需要改变原始主机头为目标URL,是否跨域
pathRewrite: {
'^/api-test/old': '/api-test/new' // 重写请求,比如我们源访问的是api-test/old,那么请求会被解析为/api-test/new
},
//第二个代理
'/api-else': {
target: 'https://197.32.22.33:8090',
ws:true, //是否启用websocket
secure: true,
changeOrigin: true,
pathRewrite: {
'^/api-else': '' //默认写法,如果不写pathRewrite就是默认为空;
},
//第三个代理
'/api-three': {
target: 'https://197.32.22.33:9090',
changeOrigin: true,
pathRewrite: {
'^/api-three': '/api-three' //重写请求,这样本地请求不会有两次/api-three
},
}
},
上述代码即可在vue-cil项目中配置代理;
代理的参数有很多,详细可以查看:http-proxy-middleware中的Options,自行添加;
那下面我们来解析一下为什么会:Vue代理本地proxytable成功,却无效报错404的几种情况
3. bug 原因分析
1.在浏览器或postman中测试接口是否正常访问;(最重要!!不然改半天都没用)
那怎么才是成功的访问呢?
例如:拿第二个代理举例:你要访问的接口为https://197.32.22.33:8090/api-else/getsomething.json,在浏览器直接输入有返回值并测试无误后再进行下一步;
2.要确保书写方式完全正确!
2.1(参考写法2) 这时候你本地去请求的接口地址会变成:http://localhost:8080/api-else/api-else/getsomething.json才是正常的!
是不是会好奇为什么会有两个/api-else,因为在本地:http://localhost:8080/api-else相当于:https://197.32.22.33:8090,这才是正常的!
2.2 (参考写法3)
在按上述写法还是有误的情况下,可以参考写法3的路由去更改测试。例:你要访问的接口为https://197.32.22.33:9090/api-three/getThreething.json,本地配置后:http://localhost:8080/api-three/getThreething.json。
多说一句,为什么要提第三种写法?
这种适用于前后端分离多后台项目,后台项目的包名为:api-three,使用第2中写法,在打包之后部署生产环境会出现请求的问题(我们自己项目踩过的坑,偶发),所以之后规定代理和后台包名统一,并且不能直接写在请求中,而是在配置代理后,重写代理的请求,指向包名;
3.请修改完config的index.js后,答应我一定重启下项目npm run dev;
4.也是我这次bug的原因(正经脸,这个超级细微!)
在配置多个代理的情况下,代理名称不能相同,也不能出现重叠的情况!
错误示范(第二个代理失效):
proxyTable: {
// 第一个代理
'/api-test': {
target: 'https://www.example.org:', /// 目标服务器 host
},
//第二个代理
'/api-testAAA': {
target: 'https://197.32.22.33:8090',
}
这的错误真的很难发现,在查了源码才看懂的;
这里说一下,为什么这样写会404!
vue的代理是基于 http-proxy-middleware实现的,而http-proxy-middleware对走哪个代理名称的的方法如下:
function matchSingleStringPath(context, uri) {
const pathname = getUrlPathName(uri);
return pathname.indexOf(context) === 0;
}
是的!他用的是indexOf() === 0来判断的!!!所以如果你的多个代理重叠/api-testAAA和/api-test这样出现的话,他们是都会返回true的!
但是/api-test更快判断完,所以/api-testAAA就失效了!!!
结语
说明:Vue cil的版本号是2,老版本的项目了;之后会记录下新版本vue cil 3+学习过程;
好了,吐槽完了,希望大家都不要踩坑~
补充知识:关于Vue的生产环境proxyTable代理问题
1、通过在 config/index.js 配置文件中找到proxyTable配置项
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //3
target: 'http://xxx:8080',
changeOrigin: true,
// secure:false 代理https必须要加
pathRewrite: {
// 1 '^/api': '/api' 这种接口配置出来 http://xxx:8080/api/getlist
// 2 ^/api': '/' 这种接口配置出来 http://xxx:8080/getlist
}
}
}
}
2、上面代码里的1和2的区别
当你接口有api的时候就需要^api的意思就是有api会首先使用api,防止被系统认为3处的api,如果接口中没有api则不需要,即可以省略,总结:
接口以“/api”开头的配置 数字1 ,没有则不需要
3、如果配置多个代理
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //3
target: 'http://xxx:8080',
changeOrigin: true,
pathRewrite: {
// A '^/api': '/api' 这种接口配置出来 http://xxx:8080/api/getlist
// ^/api': '/' 这种接口配置出来 http://xxx:8080/getlist
}
},
'/api/1': { //
target: 'http://xxx:8081',
changeOrigin: true,
pathRewrite: {
// A '^/api/1': '/api/1' 这种接口配置出来 http://xxx:8081/api/1/getlist
// ^/api/1': '/' 这种接口配置出来 http://xxx:80801/getlist
}
}
}
}
上面的调用接口的时候:
A/api/1/getlist 即可 http://xxx:8081/api/1/getlist
/api/getlist 即可 http://xxx:8080/api/getlist
第二种情况
/api/1/getlist 即可 http://xxx:8081/getlist
/api/getlist 即可 http://xxx:8080/getlist
以上这篇解决VueCil代理本地proxytable无效报错404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
-
vue解决跨域 还是404
2019-12-21 14:43:50奇怪吧,明明设置了代理,怎么没有生效呢?不是方法不对,而是没有理解proxyTable中节点的意义。其中的“api”节点,这是路由,系统会去根据这个匹配你的地址,匹配上才会生效,proxyTable中可以指定多个路由,一... -
vue加跨域代理静态文件404_解决vue-router history模式和跨域代理 部署到IIS时404的一些问题...
2020-12-19 11:43:45先解决history模式的问题:在网站根目录中创建web.config文件,内容如下: //通配所有...但发现接口不能访问,导致页面没有数据了,为了解决跨域的问题我在vue中是这么配置的:module.exports = {devServer:{proxy... -
vue加跨域代理静态文件404_解决vue本地环境跨域请求正常,版本打包后跨域代理不起作用,请求不到数据的方法...
2021-01-15 01:27:15问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传后就无法获得后台的json文件。查看了相关资料可以用nginx进行解决。还可以使用命名环境变量,请求的时候进行判断,话不多说上干货module.... -
vue加跨域代理静态文件404_部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)...
2020-12-19 11:43:45部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)项目背景是采用前后端分离,前端使用vue,后端使用springboot。工具工欲善其事必先利其器,我们先找一个操作Linux系统的工具极力推荐FinalShell。一眼看... -
vue项目使用proxy代理跨域,服务器部署接口404及history模式刷新404界面问题解决
2020-07-30 14:49:39vue项目使用proxy代理跨域,服务器部署接口404及history模式刷新404界面问题解决 -
vue跨域问题,修改代理后仍出现404
2019-04-26 11:04:56vue跨域问题,修改代理后仍出现404 首先确认安装了axios,安装方法:cnpm install axios -S或者不用镜像npm install axios dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { ... -
vue代理请求跨域的时候,出现了这样的问题 Request failed with status code 404
2020-05-13 22:01:54用vue-cli创建了一个项目,在做登录界面的时候,需要向服务器发送请求获取数据,因为这边做的数据是通过easymock来完成后端服务器数据模拟返回到客户端的,所以需要跨域解决,请求数据的方式是通过axios来的,但是却... -
vue发布到服务器接口404_记录一次解决Vue跨域请求接口404问题
2020-12-20 01:34:00需要nginx的反向代理,(nginx.conf配置文件)laravel 操作:https://www.cnblogs.com/phpk/p/10923128.html中间件在 Laravel 中允许跨域请求,我们可以在app/Http/Middleware/文件夹下构建一个追加响应... -
关于vue跨域问题,修改代理后仍出现404
2019-03-28 19:17:21这几天在学习vue,到了其中的网络请求部分,由于是前后端分离结构,所以自然就出现了跨域问题。 关于网络请求部分的配置也记录一下: 首先安装axios cnpm install axios -S 安装后导入到main.js中,进行全局... -
vue解决开发环境跨域后 打包报404 还要同时使用nginx反向代理解决生产环境跨域问题
2020-11-24 09:57:20https://www.pianshen.com/article/9593257962/ 这点特别重要 就是 rewrite ^.+api/?(.*)$ /$1 break; 这一行省略就会报 404 网上说的好多都垃圾 直接添加proxy_pass 放屁呢给我 -
proxy跨域不生效_vue前后端端口号不同,proxytable代理跨域无效
2020-12-24 03:37:05前后端都部署在我的电脑上,只有端口号不同,前端用的vuecli,采用自带的proxytable设置跨域,但是ajax发送请求的时候,却没有变端口号,状态返回404dev配置如下dev: {// PathsassetsSubDirectory: 'static',... -
axios代理跨域 cli4_如何解决vue使用axios请求后台数据出现的跨域问题?
2020-12-30 16:51:59如果你怎么都没做按如下代码请求,图1:请求后台数据代码就会发生跨域报错问题:图2:跨域报错问题如果请求数据的url不写域名和端口,那么报错404,前面那种是找到了请求所在地,但是不允许被跨域,那么如何解决的呢... -
Vue项目解决生成环境部署跨域问题 404问题
2020-08-16 19:51:101、vue.config.js配置 2、axois配置 3、用nginx代理 搞定! -
vue生产环境跨域问题
2020-09-29 09:26:55开发环境可以在vue.config文件依靠vue.cli设置代理服务器,但是打包生成的正式环境就需要在nginx那边配置反向代理,同时router模式也得切换成hash模式 如果是history同时服务器没做处理的话,页面刷新会404页面。... -
Vue Nginx反向代理配置 解决生产环境跨域
2018-10-28 22:01:36Vue 本地代理编辑好后,能实现跨域获取接口数据,但是打包后在生产环境接口报错404,要怎样才能解决生产环境跨域问题呢? 在开发环境配置好本地代理后,使用Nginx反向代理解决生产环境跨域问题! 1、修改Nginx的配置... -
nginx一文解决vue部署跨域问题
2020-11-13 23:18:38平时我们在使用如vue等诸如此类的前端框架时,难免会回到跨域问题。在本地运行项目时,我们使用axios解决跨域问题。可是当我们部署到服务器上时,则会发现我们前台请求的地址404了,555…,头都整痛了,最后结合网上... -
关于vue中webpack配置跨域方法
2020-07-01 16:09:04并且可以根据http请求接口不同去配置多种代理,需要注意的是,在封装的axios请求中,http要根据环境去replace掉前面的api,避免请求出现404的情况,target为目标代理服务器地址,changeOrigin:true为允许跨域,... -
vue项目打包后代理接口报404错误的前端解决方案
2019-11-14 12:02:40vue的项目中使用axios发送ajax请求,因为跨域,使用了proxy反向代理,开发环境测试没有问题,但是项目打包放到生产环境时报404错误,查了一下解决方案,可以后端设置nginx解决,但是我们这个项目服务器没用nginx,... -
nginx反向代理解决跨域问题
2019-09-27 12:55:52Vue 本地代理编辑好后,能实现跨域获取接口数据,但是打包后在生产环境接口报错404. 要怎样才能解决生产环境跨域问题呢? 在开发环境配置好本地代理后,使用Nginx反向代理解决生产环境跨域问题! demo: 修改Nginx的... -
vue项目中axios跨域的问题
2017-11-02 13:44:592017-11-06更新: ...看了网上的在config/index.js里添加proxyTable代理的方法,结果在我的测试项目里总是报404错误,最终在知乎上看到有位答主说用谷歌浏览器下载一个叫 Moesif Origin & CORS Changer 的 -
vue-cli创建项目设置跨域请求
2018-06-27 21:23:20为什么用vue-cli创建之后的项目调用后台接口会出现跨域的问题。直接调去后台接口就会出现404。是因为vue的localhost与访问域名不一致,导致的跨域问题。所以在这里就用到了代理,也就是代理服务器-Proxy Server,也...
-
DVTk-Storage-SCP-Emulator/DVTk-RIS-Emulator-5.0.0
-
Invalid arguments to find_dependency
-
windows 10删除指纹解锁
-
2021年 系统架构设计师 系列课
-
中央广播电视大学《机电控制与可编程序控制器技术》期末总复习资料(含答案).pdf
-
用微服务spring cloud架构打造物联网云平台
-
app软件测试全栈系列精品课程
-
FX3U-16CCL-M 用户手册.rar
-
基于Qt的LibVLC开发教程
-
SAP 函数-获取查询日期月份最后一天的日期
-
Docker从入门到精通
-
GD32F330替换STM32F301做逆变电源经验.pdf
-
六级词汇打卡第三天(三)
-
vue脚手架创建项目时的 linter / formatter 配置选择
-
cnpm安装不上任何package
-
中央广播电视大学《监督学》期末总复习资料(含答案).pdf
-
牛牛量化策略交易
-
关于sublime列编辑模式
-
中央广播电视大学《工商企管专财经英语》期末总复习资料(含答案).pdf
-
SpringBoot集成SpringSession