解决 nginx 配置vue 的axios请求访问后端跨域问题之后端处理

本文档介绍了在不支持SpringBoot的JavaWeb项目中如何处理跨域问题。通过在前端和nginx配置尝试解决未果后,重点讲述了后端使用Apache CORS Filter的步骤:下载并导入相关jar包,配置web.xml,确保IDEA识别jar包,最后在Tomcat和Nginx重启后成功解决跨域请求失败的问题。
摘要由CSDN通过智能技术生成

这个是老项目,是普通的JavaWeb项目,不支持SpringBoot!

问题复现

在这里插入图片描述

我们查看NetWork,发现它发起了两个请求,一个是post请求,跨域了,一个是OPTIONS

post请求
在这里插入图片描述

OPTIONS请求
在这里插入图片描述

我试过在这里配置一个/api去代理我后端的地址,但是并没有生效,无论我是在vue_config里面配置还是在nginx的config里面配置都没用生效,这个问题很离谱。前端配置不能用的如下
在这里插入图片描述

前端接口访问
在这里插入图片描述

结果是并没有成功,跨域问题还是存在,在nginx配置 /api/,也没有解决问题。如果你的项目是JavaWeb用Tomcat启动的话,试试后端来解决。

解决方法如下:

1、首先我们要下载一个apache的处理跨域的jar包

下载Jar包地址

在这里插入图片描述

下载完成后,我们导入到项目的lib目录下。

在这里插入图片描述

然后我们在web.xml中配置apache的跨域处理

  <filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

在这里插入图片描述

这里如果引用的jar包地址报错,这是因为IDEA没有识别我们新加的jar包我们需要手动去添加

左上角 File -> Project Structure… -> Libraries

我们需要点击绿色的+号手动将下载好的jar包导入进来

在这里插入图片描述

在这里插入图片描述
然后我们就会神奇的发现导入包的地址不报错了

然后也在Tomcat的web.xml也配置一份

在这里插入图片描述

我们重启Tomcat然后,重启nginx

再次访问,成功进来了后端
在这里插入图片描述

请求也变成了200正常

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值