跨域冲突问题解决

检查nginx配置
nginx -t
重新加载
nginx -s reload

问题一 、前后端双重跨域配置冲突问题

1、问题分析

服务端和nginx代理 都做了跨域配置，导致请求头重复

headers 里面有两个重复的
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Credentials

2、解决方法

在nginx去除服务端的跨域配置

proxy_hide_header Access-Control-Allow-Origin;
proxy_hide_header Access-Control-Allow-Methods;
proxy_hide_header Access-Control-Allow-Credentials;

问题二 浏览器发送预检请求导致跨域

1、问题表现

报错内容：

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

2、问题分析

这个错误是跨域资源共享（CORS）策略导致的问题，它出现在浏览器尝试从一个域名下的网页向另一个域名发送跨域请求时。CORS 是一种安全机制，用于控制浏览器在不同域之间共享资源的访问权限。

错误信息中提到两个关键点：

• Response to preflight request doesn’t pass access control check: 这部分意味着浏览器在发送实际请求之前会进行一个预检请求（preflight request）。预检请求是一种OPTIONS请求，用于询问服务器是否允许实际请求（例如GET、POST等）跨域访问。服务器需要正确地响应预检请求，以便浏览器允许实际请求。如果预检请求的响应不符合访问控制要求，浏览器就会阻止实际请求的发送。

• It does not have HTTP ok status: 这表示预检请求的响应状态不是HTTP 200 OK。预检请求的响应必须具有HTTP 200 OK状态，以表示服务器愿意接受实际请求。如果响应状态不是200，浏览器会认为服务器不允许跨域访问，从而阻止实际请求。

要解决这个问题，你可以采取以下步骤：

• 配置服务器以支持CORS： 在服务器端，你需要配置响应头，允许特定的域名进行跨域访问。这通常通过设置Access-Control-Allow-Origin头来完成，指定允许访问的域名。例如，可以设置为Access-Control-Allow-Origin: https://your-frontend-domain.com。

• 处理预检请求： 如果浏览器发送了预检请求，你需要确保服务器正确地响应这些请求。这包括在预检请求的响应中设置适当的头部，例如Access-Control-Allow-Methods（允许的HTTP方法）、Access-Control-Allow-Headers（允许的请求头）、Access-Control-Allow-Credentials（是否允许发送身份凭证）等。

• 确保预检请求的响应状态是HTTP 200 OK： 预检请求的响应状态必须是HTTP 200 OK，以确保浏览器允许实际请求。
  需要注意的是，解决CORS问题可能涉及到服务器端和前端的配置，具体的步骤会根据你的应用程序和架构而有所不同。

浏览器会在以下情况下发送预检请求（也称为预检检查）：

自定义请求头（Custom Request Headers）： 当你的请求中包含自定义的请求头字段，而不仅仅是标准的请求头字段，例如 Authorization 或者其他自定义的头部。

某些复杂请求方法（Certain Complex Request Methods）： 当请求方法是 PUT、DELETE、CONNECT、OPTIONS、TRACE 或者使用了 Content-Type 为 application/json 之外的内容类型时，会触发预检请求。

使用了携带身份凭证（Credentials）的请求： 当请求要求在跨域请求中发送身份凭证，例如 cookies 或 HTTP 认证信息时，会触发预检请求。

Content-Type 不同于 application/x-www-form-urlencoded、multipart/form-data 或 text/plain： 如果请求的 Content-Type 不属于这些常见的类型，会触发预检请求。

跨域请求中的其他条件： 在某些情况下，跨域请求的其他条件也可能触发浏览器发送预检请求。例如，使用了跨域 Ajax 请求时，根据请求的配置和条件，可能触发预检请求。

预检请求的目的是允许服务器决定是否接受来自跨域请求的实际请求。预检请求是一个 HTTP OPTIONS 请求，它包含的信息有：

请求方法
请求头字段
指示是否需要携带身份凭证（credentials）
请求的来源域、目标域、以及访问的资源路径
服务器收到预检请求后，会检查这些信息，并根据自身的 CORS 配置来决定是否允许实际请求。如果服务器返回合适的响应，浏览器会根据服务器的响应来决定是否发送实际的跨域请求。这个过程有助于确保安全性和防止恶意跨域访问。

3、解决办法

添加nginx配置

if ($request_method = "OPTIONS") {
       add_header Access-Control-Allow-Headers sysuserid;
       add_header Access-Control-Allow-Origin $http_origin;
       add_header Access-Control-Allow-Headers Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS,HEAD,PUT;
       add_header Access-Control-Allow-Credentials true;
       add_header Access-Control-Allow-Headers X-Data-Type,X-Auth-Token;
       return 200;
}