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

最新推荐文章于 2024-10-08 02:10:34 发布

潜行的Q

最新推荐文章于 2024-10-08 02:10:34 发布

阅读量513

点赞数

分类专栏： js技术文章标签：跨域 axios

本文链接：https://blog.csdn.net/margin_0px/article/details/84345725

版权

js技术专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一通过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服务器的重定向来解决跨域问题。