精华内容
下载资源
问答
  • 前言因为项目中遇到了这个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三端配置跨域 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后端配置跨域

    1. 若没有引入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、新建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",
    

    总结

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

    展开全文
  • 前后端都部署在我的电脑上,只有端口号不同,前端用的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

    求问大家如何解决?

    展开全文
  • 但是proxy的配置无效 <code class="language-javascript">module.exports = { devServer: { port: 8888, proxy: { '/api': { target: 'http://127.0.0.1:9002/', ws: true, ...
  • 这几天在把项目弄好,打包完成后发现之前cli配置的拦截器没有在打包后没起到作用,使用别的方法通过nginx反向代理进行配置跨域。 解决方案 在nginx里面的nginx.config里面配置 配置如下 server { listen 80;#监听...
  • vue项目需要访问访问后台接口,因为前端项目是一个单独的服务,后台接口肯定也是单独的服务,两者之间的访问地址和端口坑定不一样,一访问后台接口肯定会出现跨域问题,什么是跨域,大概意思就是要访问的地址与当前...
  • // 配置好后一定要关闭原来的server,重新npm run dev启动项目。不然无效。 proxyTable: { // 用‘/api’开头,代理所有请求到目标服务器 '/api': { target: 'http:xxx.com', // 目标接口域名 changeOrigin: ...
  • 后台服务器名 http://47.92.100.92:9002,配置 proxyTable:proxyTable: {'/api':{target: 'http://47.92.100.92:9002/',changeOrigin: true,pathRewrite: {'^api': '/api'}}},在组件login中拿数据的时候methods: {...
  • 想通过dev.com:8080去访问项目,dev.com这个域名后端已经配置好了跨域 但是访问的时候会报Invalid Host header(无效的主机头)错误 上解决方法: 要修改webpack的配置,在项目的根目录下增加vue.config.js 文件 ...
  • // axios默认配置 axios.defaults.timeout = 10000 // 超时时间 axios.defaults.baseURL = 'http://172.18.2.29' // 用于发布,发布项目时这里改成nginx反向代理的地址 axios.fileUploadUrl = '...
  • 最近私活开发的时候,后台用的tp框架,sessionId加密作为token,我请求获取后再携带请求接口会提示token无效(不存在),根据经验推断可能是跨域造成的(后台对跨域已经做了处理)。 解决方法: 由于使用的是vue-cli...
  • 配置基础 vue.config.js √ 配置 proxy 跨域 √ 修复 HMR(热更新)失效 √ 修复 Lazy loading routes Error: Cyclic dependency √ 添加别名 alias √ 压缩图片 √ 自动生成雪碧...
  • 使用vue init webpack your-project-name初始化vue项目时,项目结构...当向服务器端口(与vue项目不同端口,即跨域请求)请求数据时,代码是某个vue页面中methods下axios.get('/users').then((res)=&gt;{console....
  • element UI 上传图片跨域

    千次阅读 2020-07-29 10:22:33
    近期项目有上传图片功能,项目用的是element UI 搭的vue 框架,在看了官方文档之后,复制代码调式,浏览器一直提示跨域,百度了各种解决方法,都是无效,下面举例百度的方法: 方法一:配置文件:config>index.js...
  • 在做一个获取用户登录ip时遇到了点问题,在后台获取时出现了获取到的ip地址是我服务器的地址(原因未知,没找到...在vue.config.js配置文件中配置跨域 注意: 每次更新配置文件都需要重启项目,否则无效 devServer: {
  • 解决一次nginx跨域

    2019-03-30 11:16:36
    nginx中按照如下配置无效 add_header Access-Control-Allow-Origin 来源站点; add_header ‘Access-Control-Allow-Headers’ ‘Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Contro...
  • 1.因为发布app时 vue开发模式下配置跨域无效的,打包后会找不到接口 例如下面是之前的错误版: '/propertyCmsAPI': { target: 'http://192.168.1.111:9001/', changeOrigin: true, pathRewrite: { '^/...
  • 在做h5的时候就遇到了跨域问题,我先是配置代理解决了本地跨域调试接口 但是打包部署到到线上去测试微信JSSDK的接口时被跨域拦截 之后找后端社区请求头,依然无效 ![图片说明]...
  • 配置文件(application.properties) application.properties: server.port=8989 spring.application.name=travels spring.datasource.type=com.alibaba.druid.pool.DruidDataSource spring.datasource.driver-...

空空如也

空空如也

1 2
收藏数 21
精华内容 8
关键字:

vue配置跨域无效

vue 订阅