关于部署vue项目在Linux上的两种方式tomcat以及nignx（2）使用tomcat进行部署（1）解决上篇tomcat部署中问题

接上文：

        我将vue项目中的axios请求全部换成了对应的后台运行ip以及端口号，但是现在出现了一个问题。就是现在页面能出来了但是出现了这样的错误。

查找了很多资料发现出现ent::ERR_CONNECTION_REFUSED 大部分是因为跨域问题或者是开发环境导致的。这期文章就来尝试的解决一下个问题。

解析报错信息

 报错信息中的关键词为:

         No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是在进行跨域请求时遇到了CORS策略问题。这是一种安全机制，用于防止跨站点脚本攻击。服务器需要在响应头中添加可信任的请求方(Origin)以响应客户端的请求。在这种情况下，您需要在服务器端配置'Access-Control-Allow-Origin'响应头，允许服务器接受来自'我的前台服务器的请求。

下面开始尝试解决一下

尝试解决方法：

        在配置文件中添加一些配置，来配置上面需要的相应头！

这是我本来的配置文件 

通过更改vue中的配置文件发现，并不能解决。！！！！

问题解决以及真正问题

在查阅资料、以及询问大佬之后出现这样的问题是在后端。这个原因是后台在处理这个请求的时候。因为没有携带下面的这个请求头。产生的被认为不安全的跨域请求。所以需要在后台代码中添加过滤器来运行这样的跨域请求。我的后台是使用spring-boot写的Java单体项目所以在后台的项目中添加写上一下我提供的代码。（过滤器）

 No 'Access-Control-Allow-Origin' header is present on the requested resource.

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "authorization, content-type");
        response.setHeader("Access-Control-Max-Age", "3600");
        chain.doFilter(req, res);
    }
    // ...
}

解释一下这段代码：

使用Java Servlet规范中的过滤器(Filter)实现跨域资源共享(CORS)的代码示例。

CORS是一个机制，它使用额外的HTTP头信息告诉浏览器，让网页的一个网域，访问另一个存储在不同域名的服务器上的指定资源被授权，通过在服务器上添加这样的响应头，服务器决定允许哪些源访问哪些资源。

在这个例子中，Filter的方法doFilter会被每个请求调用，请求会由链中的下一个filter或servlet处理，最后返回到响应头中加入一些CORS相关的标识：

Access-Control-Allow-Origin 表示允许跨域请求的源，该值设置为*表示允许所有来源； Access-Control-Allow-Methods 表示所请求的预检请求(Preflight Request)允许的HTTP方法，该值设置为常见的CRUD方法； Access-Control-Allow-Headers 表示所请求的预检请求的请求头(Request Headers)类型； Access-Control-Max-Age 表示表明在发送预检请求后的该请求的响应之前，预检请求的结果被缓存的时间量。

这段代码实现了CORS功能，使得前端跨域访问服务器变得可行，提高了数据交互的灵活性和安全性。

其他资料（来自chatGPT阿丹没有尝试）

还可以在tomcat中配置cors,这个协议主要就是让我们的网站以及请求更安全更高效。

要在Tomcat中配置CORS，您需要遵循以下步骤：

1. 编辑Tomcat安装目录中的conf/web.xml文件，在其中添加以下内容：

<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>
</filter>

<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

1. 请注意，这里使用的是 Apache Catalina 的过滤器 org.apache.catalina.filters.CorsFilter 。如果您使用的是不同的应用服务器，可能需要使用不同的CORS过滤器。

2. 也可以设置其他CORS参数，例如允许的方法、头信息和凭据等。例如：

<init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
</init-param>
<init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization</param-value>
</init-param>
<init-param>
    <param-name>cors.allow.credentials</param-name>
    <param-value>true</param-value>
</init-param>

1. 保存并重新启动Tomcat服务器。

2. 确保应用程序的响应头包含Access-Control-Allow-Origin标头，例如：

response.setHeader("Access-Control-Allow-Origin", "*");

这将允许所有来源（）访问API。如果只想允许特定的来源，请将替换为您要允许的域名。

现在Tomcat服务器应该已经成功地启用了CORS。