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

导读:本篇文章讲解 解决 nginx 配置vue 的axios请求访问后端跨域问题之后端处理,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

这个是老项目,是普通的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正常

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/63109.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!