前后端完全分离开发模式Tomcat跨域问题处理

时间:2022-08-28 11:57:41

公司新项目实现方案采用前后端完全分离架构,后端采用spring boot框架,前端纯HTML5开发
部署会采用同一台服务器,但是在实现过程中分工开发出现ajax请求跨域问题
故为解决开发问题发现如下解决方案:
1:chrome修改跨域请求:
参照百度经验
https://jingyan.baidu.com/article/148a1921c9dbf24d71c3b11f.html
2:tomcat修改配置文件允许跨域:
该方案为网上搜寻,使用过程中遇到一些疑问,但是不影响使用。
● 打开tomcat安装目录 -> 打开 conf 目录 -> 打开web.xml文件
● 将如下代码复制到web.xml文件中(我是放在 460左右的位置,不要放在最前面和最后面,一定要放中间)
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>


本机测试发现当在web.xml文件中添加该配置后重启tomcat会出现问题,页面接口不能访问,
当tomcat正常运行阶段,web.xml直接替换可以生效,未知原因,但是可以使用。