nginx解决跨域和spring解决跨域

最新推荐文章于 2025-06-17 15:07:53 发布

原创最新推荐文章于 2025-06-17 15:07:53 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Nginx配置跨域，包括解决简单请求和非简单请求的跨域问题。提供了具体的Nginx配置代码示例，以及在Spring框架中配置跨域的替代方案。

nginx版本是1.15.12配置跨域问题


server
{
     listen 3002;
     server_name localhost;
     location /ok {
       // 这行跟跨域无关
         proxy_pass http://localhost:3000;
         # 指定允许跨域的方法，*代表所有
         add_header Access-Control-Allow-Methods *;
         # 预检命令的缓存，如果不缓存每次会发送两次请求
         add_header Access-Control-Max-Age 3600;
         # 带cookie请求需要加上这个字段，并设置为true
         add_header Access-Control-Allow-Credentials true;
         # 表示允许这个域跨域调用（客户端发送请求的域名和端口） 
         # $http_origin动态获取请求客户端请求的域 不用*的原因是带cookie的请求不支持*号
         add_header Access-Control-Allow-Origin $http_origin;
         # 表示请求头的字段 动态获取
         add_header Access-Control-Allow-Headers 
         $http_access_control_request_headers;
         # OPTIONS预检命令，预检命令通过时才发送请求
         # 检查请求的类型是不是预检命令
         if ($request_method = OPTIONS){
           return 200;
         }
     }
}

这样配置nginx匹配到ok路径url的就可以解决跨域问题了。也可以把跨域的参数配置到nginx的http模块里面针对nginx的所有请求或者配置到nginx的server模块里面针对某个项目下面。配置到哪个作用域看项目具体需求而定。

注意：有些人配置nginx的跨域问题会少配置以下代码的。如果缺少这两行代码将导致非简单请求无法解决跨域问题。而简单请求却可以解决跨域问题，这样容易造成跟前端扯皮，后端说配置了跨域问题，前端却说有跨域问题出现


 if ($request_method = OPTIONS){
     return 200;
 }

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同时满足上面两个条件，就属于非简单请求。浏览器对这两种请求的处理，是不一样的。跨域的详情讲解请看这篇文章: http://www.ruanyifeng.com/blog/2016/04/cors.html

在项目中解决跨域问题建议在spring代码中解决比较好。在 nginx中配置跨域问题语义不清，迁移项目nginx的配置还得配置上。

springboot的2.1.8.RELEASE版本配置跨域方式


@Configuration
public class CorsConfig implements WebMvcConfigurer {
    /**
     * 配置跨域请求处理
     * */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);
    }
}