vue+axios+httpsevlet解决前端跨域的问题

一  通过webpack中的proxyTable机制,用nodejs服务器进行转发。但只局限于生产环境。

proxyTable: {

'/api': {

target: 'http://172.21.73.144:30010',

changeOrigin: true,

pathRewrite: {

'^/api': '/'

}

}

},

二  在后端httpsevlet的请求中加入

resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type,accesstoken");
resp.setHeader("Access-Control-Allow-Credentials", "true");

但axios当发送请求时会发两次。第一次发送options请求。主要时验证身份,第二次发送具体的GET或POST请求。

而httpsevlet要在所有的请求中加上上面这段代码。解决方法:

1、在filter中添加。在过滤器中验证。

2、在server()方法中添加、server方式先于其他请求方法执行,在其中起到调度的作用。

三   通过ngnix服务器的重定向来解决跨域问题。

展开阅读全文

没有更多推荐了,返回首页