-
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前端、java后端、nginx三端配置跨域
2020-08-04 22:30:05#vue前端、java后端、nginx三端配置跨域 1. Vue前端配置跨域 1.在vue.config.js文件(修改之后进行重启才有效)或index.js文件中配置 module.exports = { devServer: { // proxyTable: proxyConfig.proxyList, // ...vue前端、java后端、nginx三端配置跨域
1. Vue前端配置跨域
1.在vue.config.js文件(修改之后进行重启才有效)或index.js文件中配置
module.exports = { devServer: { // proxyTable: proxyConfig.proxyList, // 无效,不使用,20190422 proxy: { '/api': { target: 'https://c.y.qq.com',//后端接口地址 changeOrigin: true,//是否允许跨越 pathRewrite: { '/api': '' //'^/api': '/api',//重写, } } }, }, }
2. java后端配置跨域
- 若没有引入spring security,直接在Controller层上加上CrossOrigin注解即可。
@CrossOrigin public class UserController { }
2.若引入了spring security
@Configuration @EnableGlobalMethodSecurity(prePostEnabled = true) public class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Override public void configure(HttpSecurity http) throws Exception { http .cors().configurationSource(CorsConfigurationSource()).and()//允许跨域 ; } private CorsConfigurationSource CorsConfigurationSource() { CorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); //同源配置,*表示任何请求都视为同源,若需指定ip和端口可以改为如“localhost:8080”,多个以“,”分隔; corsConfiguration.addAllowedHeader("*");//header,允许哪些header,本案中使用的是token,此处可将*替换为token; corsConfiguration.addAllowedMethod("*"); //允许的请求方法,PSOT、GET等 ((UrlBasedCorsConfigurationSource) source).registerCorsConfiguration("/**",corsConfiguration); //配置允许跨域访问的url return source; } }
3. nginx配置跨域
server { listen 80; server_name netease.flaming.com; add_header Access‐Control‐Allow‐Origin *; #允许客户端携带整数访问 add_header Access‐Control‐Allow‐Credentials true; #允许客户端跨域访问的方法 add_header Access‐Control‐Allow‐Methods GET; location / { proxy_pass http://192.168.0.135:3000; proxy_connect_timeout 600; proxy_read_timeout 600; } }
-
SSM与VUE移动端跨域总结
2020-05-19 16:43:521、新建filter类,配置请求头,以及允许访问的WEB服务器的域名/IP 地址和端口号 注意这里不能**不然cookie无效。 httpServletResponse.setHeader(“Access-Control-Allow-Origin”, “**”); package filter; import...1、配置跨域过滤器:
注意这里不能使用***不即能使用全局,不然会导致cookie无效。
httpServletResponse.setHeader(“Access-Control-Allow-Origin”, “**”);
特别注意我们的Access-Control-Allow-Headers信息package filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class CrossFilter implements Filter{ private boolean isCross = false; @Override public void destroy() { isCross = false; } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException { if (isCross) { HttpServletRequest httpServletRequest = (HttpServletRequest) request; HttpServletResponse httpServletResponse = (HttpServletResponse) response; System.out.println("拦截请求: " + httpServletRequest.getServletPath()); httpServletResponse.setHeader("Access-Control-Allow-Origin", "http://192.168.73.103:8081"); httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); httpServletResponse.setHeader("Access-Control-Max-Age", "0"); httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token"); httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true"); httpServletResponse.setHeader("XDomainRequestAllowed", "1"); } filterChain.doFilter(request, response); } @Override public void init(FilterConfig filterConfig) throws ServletException { String isCrossStr = filterConfig.getInitParameter("IsCross"); isCross = isCrossStr.equals("true") ? true : false; System.out.println(isCrossStr); } }
2、配置web.xml
<!-- 解决跨域Filter --> <filter> <filter-name>CrossFilter</filter-name> <filter-class>filter.CrossFilter</filter-class> <init-param> <param-name>IsCross</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CrossFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
3、配置springmvc.xml
<!-- 配置跨域 --> <mvc:cors> <mvc:mapping path="/**" allowed-origins="http://192.168.73.103:8081" allowed-methods="POST, GET, OPTIONS, DELETE, PUT" allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With" allow-credentials="true"/> </mvc:cors>
4、要想cooklie有效,VUE的main.js里axios还需要加以下代码
axios.defaults.withCredentials = true//开启跨域
这里顺便配上axios的使用
1、main.js的配置//Axios import axios from "axios" axios.defaults.withCredentials = true //开启跨域 axios.defaults.baseURL ='http://192.168.1.104:8080' Vue.prototype.axios = axios; import qs from 'qs' Vue.prototype.qs = qs;
2、具体使用,可以配合上qs进行传参
let comValue = this.qs.stringify({ year:this.year, }) this.axios({ url:'/dayi/dayi/xxx', method:'post', data:comValue }).then((response)=>{ console.log(response.data); response.data.forEach(item=>{ this.course_List.push(item); }) }).catch((error)=>{ Toast("对不起,系统错误"); })
5、如果想让手机在同网段访问,您可以在前端进行以下操作
5.1、关闭电脑防火墙
5.2、设置访问的路径
axios.defaults.baseURL ='http://192.168.73.103:8080'
5.3、修改package.json中的dev的信息
"dev": "webpack-dev-server --open --host 192.168.1.104",
总结
接下来你就可以打开手机,和电脑一样进行操作啦,这里讲的是移动端的哦。
-
proxy跨域不生效_vue前后端端口号不同,proxytable代理跨域无效
2020-12-24 03:37:05前后端都部署在我的电脑上,只有端口号不同,前端用的vuecli,采用自带的proxytable设置跨域,但是ajax发送请求的时候,却没有变端口号,状态返回404dev配置如下dev: {// PathsassetsSubDirectory: 'static',...前后端都部署在我的电脑上,只有端口号不同,前端用的vuecli,采用自带的proxytable设置跨域,但是ajax发送请求的时候,却没有变端口号,状态返回404
dev配置如下
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
// 去掉这个注释
'admin': {
target: 'http://localhost:8004',
changeOrigin: true,
pathRewrite: {
'^/admin': ''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // 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-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-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,
cssSourceMap: true
},
控制台状态如下:
Request URL: http://localhost:8081/admin/register1?0=n&1=a&2=m&3=e&4=%3D&5=%22&6=l&7=o&8=u&9=t&10=o&11=n&12=g&13=%22&14=%26&15=p&16=w&17=d&18=%3D&19=%22&20=1&21=1&22=1&23=1&24=%22
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:8888
Referrer Policy: no-referrer-when-downgrade
求问大家如何解决?
-
vue跨域 在vue.config.js里配置proxy不起作用
2020-12-07 15:42:52但是proxy的配置就无效 <code class="language-javascript">module.exports = { devServer: { port: 8888, proxy: { '/api': { target: 'http://127.0.0.1:9002/', ws: true, ... -
vuecli3打包后出现跨域问题,前端配置拦截器无效
2020-09-01 15:39:51这几天在把项目弄好,打包完成后发现之前cli配置的拦截器没有在打包后没起到作用,使用别的方法通过nginx反向代理进行配置跨域。 解决方案 在nginx里面的nginx.config里面配置 配置如下 server { listen 80;#监听... -
vue中访问后台接口,跨域问题的proxyTable 配置无效,访问404问题解决
2020-02-26 14:49:16vue项目需要访问访问后台接口,因为前端项目是一个单独的服务,后台接口肯定也是单独的服务,两者之间的访问地址和端口坑定不一样,一访问后台接口肯定会出现跨域问题,什么是跨域,大概意思就是要访问的地址与当前... -
Vue cli 2 和 Vue cli 3 配置代理实现跨域
2020-04-21 21:10:59// 配置好后一定要关闭原来的server,重新npm run dev启动项目。不然无效。 proxyTable: { // 用‘/api’开头,代理所有请求到目标服务器 '/api': { target: 'http:xxx.com', // 目标接口域名 changeOrigin: ... -
proxy跨域不生效_vue-cli 解决跨域 proxyTable设置无效 报错504 node报错 代理错误
2021-02-02 21:39:51后台服务器名 http://47.92.100.92:9002,配置 proxyTable:proxyTable: {'/api':{target: 'http://47.92.100.92:9002/',changeOrigin: true,pathRewrite: {'^api': '/api'}}},在组件login中拿数据的时候methods: {... -
vue-cli配置域名访问报错:Invalid Host header(无效的主机头)
2020-10-21 18:27:16想通过dev.com:8080去访问项目,dev.com这个域名后端已经配置好了跨域 但是访问的时候会报Invalid Host header(无效的主机头)错误 上解决方法: 要修改webpack的配置,在项目的根目录下增加vue.config.js 文件 ... -
Vue爬坑--解决axios跨域访问SessionID变化或无效,nginx反向代理
2019-07-24 16:56:42// axios默认配置 axios.defaults.timeout = 10000 // 超时时间 axios.defaults.baseURL = 'http://172.18.2.29' // 用于发布,发布项目时这里改成nginx反向代理的地址 axios.fileUploadUrl = '... -
Vue-cli中webpack设置proxy(代理)解决跨域的问题
2018-11-23 10:21:43最近私活开发的时候,后台用的tp框架,sessionId加密作为token,我请求获取后再携带请求接口会提示token无效(不存在),根据经验推断可能是跨域造成的(后台对跨域已经做了处理)。 解决方法: 由于使用的是vue-cli... -
手把手教你搞定 vue-cli4 配置
2020-08-13 22:28:04√ 配置基础 vue.config.js √ 配置 proxy 跨域 √ 修复 HMR(热更新)失效 √ 修复 Lazy loading routes Error: Cyclic dependency √ 添加别名 alias √ 压缩图片 √ 自动生成雪碧... -
使用webpack模板初始化项目时,proxyTable配置无效!!
2018-09-19 17:11:12使用vue init webpack your-project-name初始化vue项目时,项目结构...当向服务器端口(与vue项目不同端口,即跨域请求)请求数据时,代码是某个vue页面中methods下axios.get('/users').then((res)=>{console.... -
element UI 上传图片跨域
2020-07-29 10:22:33近期项目有上传图片功能,项目用的是element UI 搭的vue 框架,在看了官方文档之后,复制代码调式,浏览器一直提示跨域,百度了各种解决方法,都是无效,下面举例百度的方法: 方法一:配置文件:config>index.js... -
vue 前端获取用户登录地址 ip 设备型号
2020-05-18 16:42:13在做一个获取用户登录ip时遇到了点问题,在后台获取时出现了获取到的ip地址是我服务器的地址(原因未知,没找到...在vue.config.js配置文件中配置跨域 注意: 每次更新配置文件都需要重启项目,否则无效 devServer: { -
解决一次nginx跨域
2019-03-30 11:16:36nginx中按照如下配置无效 add_header Access-Control-Allow-Origin 来源站点; add_header ‘Access-Control-Allow-Headers’ ‘Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Contro... -
记录 vue项目打包放入 hbuilder 做app真机测试时 无法请求后台服务接口
2020-03-04 10:40:471.因为发布app时 vue开发模式下配置的跨域是无效的,打包后会找不到接口 例如下面是之前的错误版: '/propertyCmsAPI': { target: 'http://192.168.1.111:9001/', changeOrigin: true, pathRewrite: { '^/... -
后端设置了请求头,前端还是存在跨域问题如何解决,卡一周了,请各位帮忙看看问题纠结出在哪?
2020-02-15 12:45:54在做h5的时候就遇到了跨域问题,我先是配置代理解决了本地跨域调试接口 但是打包部署到到线上去测试微信JSSDK的接口时被跨域拦截 之后找后端社区请求头,依然无效 ![图片说明]... -
配置文件(application.properties) application.properties: server.port=8989 spring.application.name=travels spring.datasource.type=com.alibaba.druid.pool.DruidDataSource spring.datasource.driver-...