直接访问如下：this.$axios.get("http://localhost:8089/yc/demo").then(res=>{ console.log(res)}).catch(err=>{ console.log(err)})当运行程序后，控制台报错如下：...XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'...跨域访问错误：可以看到浏览器拦截了请求，因为跨域了，下面解决跨域问题。前端的修改：Step1：配置BaseUrl在main.js中，配置下访问的Url前缀：import Vue from 'vue'import App from './App'import Axios from 'axios'Vue.prototype.$axios = AxiosAxios.defaults.baseURL = '/api'Axios.defaults.headers.post['Content-Type'] = 'application/json';Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', components: { App }, template: '<App/>'})关键代码是：Axios.defaults.baseURL = '/api'，这样每次发送请求都会带一个/api的前缀。Step2：配置代理修改config文件夹下的index.js文件，在proxyTable中加上如下代码：'/api':{ target: "http://localhost:8089/yc", changeOrigin:true, pathRewrite:{ '^/api':'' }}Step3：修改请求Url修改刚刚的axios请求，把url修改如下：this.$axios.get("/demo").then(res=>{ console.log(res)}).catch(err=>{ console.log(err)})Step4：重启服务重启服务后，此时已经能够访问了原理：因为我们给url加上了前缀/api，我们访问/demo就当于访问了：localhost:8080/api/demo（其中localhost:8080是默认的IP和端口）。在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容，因此实际访问Url是http://localhost:8089/yc/demo。后端的修改：import javax.servlet.*;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; HttpServletRequest request = (HttpServletRequest) req; // 不使用*，自动适配跨域域名，避免携带Cookie时失效 String origin = request.getHeader("Origin"); if(StringUtils.isNotBlank(origin)) { response.setHeader("Access-Control-Allow-Origin", origin); } // 自适应所有自定义头 String headers = request.getHeader("Access-Control-Request-Headers"); if(StringUtils.isNotBlank(headers)) { response.setHeader("Access-Control-Allow-Headers", headers); response.setHeader("Access-Control-Expose-Headers", headers); } // 允许跨域的请求方法类型 response.setHeader("Access-Control-Allow-Methods", "*"); // 预检命令（OPTIONS）缓存时间，单位：秒 response.setHeader("Access-Control-Max-Age", "3600"); // 明确许可客户端发送Cookie，不允许删除字段即可 response.setHeader("Access-Control-Allow-Credentials", "true"); chain.doFilter(request, response); } @Override public void init(FilterConfig filterConfig) { } @Override public void destroy() { } /* 注册过滤器： @Bean public FilterRegistrationBean registerFilter() { FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(); bean.addUrlPatterns("/*"); bean.setFilter(new CorsFilter()); // 过滤顺序，从小到大依次过滤 bean.setOrder(Ordered.HIGHEST_PRECEDENCE); return bean; } */}
转载于:https://www.cnblogs.com/Sky-Raining/p/10309950.html
