Vue axios跨域配置proxyTable404错误

偏执的太偏执、 2023-06-05 11:21 22阅读 0赞

配置的config/index.js

proxyTable: {
          '/apia':{
            target:'https://api.caiyunapp.com',//目标接口域名
            changeOrigin: true,//是否跨域
            pathRewrite:{
              '^/apia': ''//重写接口,后面可以使重写的新路径，一般不做更改
            }
          },
          '/api': {
              target: 'http://127.0.0.1:8081',
              changeOrigin: true,
              pathRewrite: {
                '^/api': '/'
              }
          }
        },

第一个是第三方接口，能够正常访问，第二个是我的后端程序，访问时报404错误  
![在这里插入图片描述][20191009000029400.PNG]  
然后我尝试了从后端解决  
在springboot的controller前面加了

@CrossOrigin(origins= {"http://127.0.0.1:8080"},maxAge=3600)

然而，仍然报错，  
采用了filter解决

package per.czt.onlineshop.filter;
    
    import java.io.File;
    import java.io.FileFilter;
    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.HttpServletResponse;
    
    import org.springframework.stereotype.Component;
    //@Component
    public class CrosFilter implements Filter {
    
    	@Override
    	public void init(FilterConfig filterConfig) throws ServletException {
    		// TODO Auto-generated method stub
    		System.out.println("CrosFilter");
    
    	}
    
    	@Override
    	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
    			throws IOException, ServletException {
    		HttpServletResponse res = (HttpServletResponse) response;
    		res.setHeader("Access-Control-Allow-Origin", "*");
    		res.setHeader("Access-Control-Allow-Credentials", "true");
    		res.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
    		res.setHeader("Access-Control-Max-Age", "3600");
    		res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    		chain.doFilter(request, response);
    		// TODO Auto-generated method stub
    
    	}
    
    	@Override
    	public void destroy() {
    		// TODO Auto-generated method stub
    
    	}
    
    }

还是报错，  
最后，从网上查了好的，都没有解决，最后有位朋友的博客中说如果后端错误，proxytable是无效的  
我尝试了一下后端访问，结果  
![在这里插入图片描述][20191009000618733.PNG]  
为什么后端访问不到url那？我又查阅了一些资料  
我今天在整合mongodb时候配置了一个@SpringBootApplication(scanBasePackageClasses= \{com.mongodb.MongoClient.class\})(不加也行的)  
scanBasePackageClasses扫描不到controller包，导致无法访问url，项目却能够启动，然后删除了这个注解，问题解决  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]  
错误原因：没有充分了解springboot的注解的原理，以后应该加强框架底层原理的学习

[20191009000029400.PNG]: /images/20230601/3bc58bda600c47a5b005432ca2447984.png
[20191009000618733.PNG]: /images/20230601/e2b6f35a4bfe466b920d6683bd936665.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]: /images/20230601/54116bcb4a1d42738cd482944338023f.png