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

最新推荐文章于 2024-07-22 14:29:17 发布

老唐在线铲屎

最新推荐文章于 2024-07-22 14:29:17 发布

阅读量2.2k

点赞数

分类专栏： nginx 文章标签： nginx vue.js 运维

本文链接：https://blog.csdn.net/qq_45504834/article/details/127017876

版权

nginx 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文档介绍了在不支持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>