前言
因为项目中遇到了这个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三端配置跨域
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;
        }
    }

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",

总结
接下来你就可以打开手机,和电脑一样进行操作啦,这里讲的是移动端的哦。

前后端都部署在我的电脑上，只有端口号不同，前端用的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
求问大家如何解决？